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Introduction 


Making a game of their own is always the dream of many 
people since they are teenagers. As new technology 
emerges, that dream becomes more and more accessible 
each year. There is an exponential growth of game 
releases over the past decade. About 10,000 games were 
released on Steam in 2019, and around 1000 games per 
day were released on mobile devices. 


One of the reasons that more games are coming out is 
because there are more and better tools to make them. 
With the release of free game engines like Unreal Engine 
and Unity, to name a few, start making games is within 
the reach of everyone. The competition between the 
game engine developers pushes them to implement 
new features every year, and we have seen a burst of 
improvements to the tools. 


Outside of the game engines, new developments are 
happening in every comer of the game industry. Softwares 
like the Substance Suite solve the texturing process in 
innovative ways. Newer generations of hardware like 
Nvidia RTX and Playstation 5 push realtime rendering to 
new heights. And new categories of devices like Oculus 
Rift, Steam VR, and Microsoft Hololens are pioneering new 
user expenences. To add on top of that, services like Quixel 
Megascan and Adobe Mixamo are providing libraries of 
reusable assets that signif cantly improve productivity. 


It isthe best time than ever for anyone who wants to dip 
into a game development journey. However, making a 
game is never an easy task. It requires all kinds of talents 
to put together a working game that has amazing visuals, 
engaging gameplay, immersive audio, and an overall 
well-balanced system. There are many sources where you 
can learn dif erent ingredients of game development, but 
only fewer sources explain the whole recipe. This book is 
dedicated to cover the entire process of making a game, 
from making assets to programming, and all the way to 
package a complete game. 








Who’s It For? 


This book is designed for beginners who want to start their 
game development joumey and are unsure where to start 
and which direction to go. As a reader, you are going to 
jump into a well-organized leaming track that guides you 
through all aspects of game development. It also shields 
you from noises and focuses on the fundamentals, which 
gives you a solid foundation and is able to branch out to 
nitty-gritty details without losing the whole picture. 


For any game enthusiasts or students, this book is a 
perfect f t to get started with game development. For 
teachers, this book of ers a well-structured solution for 
your curriculum. For anyone who wants to utilize the 
game engine for interactive products, this book covers the 
Skill you need extensively as well. 


What Does this Book Cover? 


This book covers all aspects of game development that 
includes but not limited to: 


Environment Modeling 


Environment modeling is the process of making 3D 
models for environments. We are going to cover what is a 
3D model, how to make them, and how to optimize them 
for your game. 


Character Modeling 


Character modeling is the process of making 3D 
characters. We will cover how to approach organic shapes 
with additional modeling methods. 


UV Mapping 


We are going to learn how to create a 2D coordinate of a 
3D model to map textures to the model. The process we 
call UV Mapping. 
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Texturing 


Texturing is the process of def ning the color and all other 
aspects of the appearance of the model. 


Rigging 
Rigging is atechnical skill to add skeleton and controllers 
to animate the character. 


Character Animation 


We are going to cover the techniques and theories to 
animate characters. 


Game Engine Lighting and Baking 


We are going to practice workf ows on lighting an 
environment, which includes how lights work in the game 
engine, and technical details of baking the lighting. 


Game Programming 


We are going to cover programming languages, theory, 
and practices to create gameplay. 


We will also explore audio and VFX solutions and many 
other small details you need to know to create a game. 
At the end of this book, you should have everything 
you need under your belt to start making your next 
awesome game! 


Final Notes 


It is critical to point out that game development is 
time-consuming. Please dedicate your energy and time 
to the leaming process, and don’t easily give up on any 
obstacles. With the internet at your f ngertip, you can f nd 
solutions for just about anything. 


It is also important to acknowledge that tools change 
all the time, and you should always leam new stuf and 








explore new ideas. Please take away the theories we cover 
in this book, but don't be religious of the tools we use. 


Alrighty, we know you are tired of reading introductions, 
and many people jump over it. It is time that we start this 
fantastic journey and start making some awesome games! 


Jingtian Li 


May 9, 2020 
San Antonio, TX, USA 
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Maya Modeling 





We will jump into the production by discussing modeling. 
3D models are the foundation of the graphics of modem 
games. They encompass the environment and characters 
you see on the screen. An eye-catching visual is one of the 
key components for a game to succeed. In this chapter, we 
will discuss in detail about how they are built. 


Basics of Navigation 


Autodesk Maya will be our tool of choice for modeling. 
It is not the best modeling tool on the market, but it isthe 
most used over the entire production pipeline, especially 
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for animation. So, let us get Maya up and running on your 
machine. The UI (user interface) will look like Figure 1.1. 
The large region in the middle of the UI is the viewport; 
this is where we see our models. It is currently empty, 
with just a grid in the middle to indicate the center of the 
world. The center of this grid is called the origin. 


To Navigate around the viewport, hold down Alt key and 
drag the left-mouse button to look around the viewport. 
To zoom in and out, hold down the Alt key and drag the 
right-mouse button. To pan left and right, hold down the 
Alt key and drag the middle-mouse button. 


A 3D space has width, height, and depth, each 
represented on three axes called the X, Y, and Z axes. 

The lower left corner of the viewport shows the directions 
of these axes. 


Rendering 


The shape Is drawn by the Graphic API, but the lighting is 
calculated by the Fragment Shader written by the game 
engine programmer. It isa complicated process, and we 
do not have to understand the details and math behind it. 
It is enough to know that the renderer is the tool drawing 





whatever you see on screen. Maya's interactive renderer 
(that shows you what is currently in your scene) Is called 
Viewport 2.0. 


What is a 3D Model? 


In the menus, go to Create->Polygon Primitives->Plane. 
This will create a shape in the middle of the viewport. 

On the right side of the UI, look for the Channel Box. 

This is a brief list of essential attributes we can tweak 

for the object. Under the INPUTS section, click on the 
polyPlanel to open it and change the Subdivisions Width 
and Subdivisions Height to 1 to make the plane only one 
polygon (Sometimes called a “face”). 


What we are seeing now is the building block of any 
model - a face with four comers that we typically call a 
rectangle in geometry classes; in 3D graphic terms, we call 
this a quad. Any complicated shape can be composed by 
assembling many quads together to create 3D forms. 


Translation 


On the right side of the UI, there is a column of 
manipulation tools. You can try and use the Q, W, E, and 
R buttons to switch between these tools: Q for the select 
tool, W forthe move tool, E for the rotation tool, R for the 
scale tool. 


To select the model, simply left-click on it or drag a 
selection box over it. To deselect the model, click in the 
empty space, or hold down Ctrl and click on the model, 
or drag a selection box over it. 


To move the model, after selecting it, hit the W button. 
This will display new handles (called gizmos) that will 
allow you to move the object. Try dragging the various 
arrows to move it only along a particular axis. Look 
carefully at the gizmo, and you will see squares that can 
be dragged to move it along two axes at the same time; 
you can even drag the cyan square in the middle to move 
it freely along all axes in the 3D space. 
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To rotate the model, after selecting it, hit the E button, 
drag the circles on the gizmo to rotate it around dif erent 
axes. You can also drag the yellow one on the outside to 
rotate it around a plane that is perpendicular to the angle 
of the viewport. 


To scale the model, hit the R button, and drag the various 
boxes to scale it along their respective axes. You can also 
drag the various squares to scale it along two axes at the 
same time; you can even drag the yellow boxin the middle 
to scale it up along all axes, essentially making it bigger. 


There are more tricks about this sort of manipulation that 
we will cover later on when we jump into modeling. 


Anatomy of a Model 
Edge 


Hold down the right mouse button on the model, and you 
will see a pop-up Menu we call a Marking Menu. Here, we 
can see various parts of the form we can switch to. With 
the marking menu active, slide up and chose Edge; the 
four edges around the face now appear to be in a lighter 
blue color. You can click on any of the edges to select 
them. When an edge is selected, it will be highlighted 
with orange color. Once selected, you can change to the 
Move tool (hit W on the keyboard) and drag the three 
arrows to move the edge along the respective direction. 


Vertex 


You can also hold the right mouse button again and chose 
Vertex. Four purple points will show up on the comer of 
this face. These are the vertices where edges meet. You 
can click to select any of them and move them around just 
like how you can move an edge. 


Face 


Hold down the right mouse button again and chose Face; 
you can now select the face and move it around as well. 





Edge, Vertex, and Face are the three important elements 
of any 3D form's polygons. We can add and tweak these 
elements to create any shape we want. 


Object Mode 


Hold down the right mouse button again. This time, we 
chose Object Mode. This will allow us to move the model 
altogether. Object, Vertex, Edge, and Face are the primary 
modes we keep switching between while making a 
model. 


Normal 


Use the alt-left, - middle, and/or -right mouse drag to 
rotate your camera to look at the bottom of the face. 
You can see it appears to be black. Any face in 3D has 

a front side and a back side. The front side will appear 
normal, while the back side will be black or invisible 
(depending on the rendering engine). Maya makes the 
back of the face black in the default setting. To view 
this, using the top menus f nd Display->Polygons->Face 
Normals. 


Press the Q button to switch to the select mode to get 
nd of the Move tool handles. We can now see a green 
line sticking out from the front face of the model. In 
general, the front of the polygon should face outwards. 
It is possible though to render both sides of the face. 
Consider a situation like rendering a piece of paper. Here 
we would def nitely want both sides of the polygons seen, 
but otherwise we want to avoid rendering both sides, if 
possible, to avoid performance overhead. Since games 
have to draw many frames each second, we want to 
always ensure that we aren't drawing anything we don't 
need to (Figure 1.2). 


Modeling Rules 


Before we start modeling anything, let’s talk about a few 
important rules when modeling for games. 
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Polycount 


Each of those four-sided faces we looked at earlier 
can be triangulated into two triangular polygons. We 
typically use the number of triangles of a model as the 
number for polycount, even we use quads to make 

a model. The reason we use the number of triangles 
instead of quads is because a triangle is guaranteed 
to be af at surface, while this is not guaranteed for a 
geometric f gure with more than three vertices. Thus, 
the rendering process uses triangles as the basic 
rendering unit. Fewer polygons means your game Is 
easier to run (less data); so f nd the balance of including 
the needed number of polygons to describe a shape, 
but not extras. 


Topology 


Topology is how the faces are laid out on the model. 
Use quads if possible, because quads have a strong 
sense of directionality and are easy to represent shape 
evolution and deformation. We want the f ow of the 
quads to represent the change of the surface. Figure 1.3 
shows how topology is critical for deforming a face. The 
loops of faces around the orbicularis muscle, nasolabial 
fold, and orbicularis oris create an essential structure 

to support the facial expression. Long story short, 
topology is for the purpose of better representing the 
Shape of the model and supporting the deformation for 
animation. 





ppe 
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Size and Proportion 


Size is a critical aspect in 3D modeling, no matter how 
detailed a model is. If the size or proportion is of , the 
model will never look right. In Maya, the default unit is a 
centimeter. This is the unit across many popular programs 
including Maya, Unreal Engine, Blender, etc. Other 
software, like Unity, use the meter as the default unit, 

but converting between the two scales is an easy math. 
One should always check sizes and dimensions to ensure 
things will work with physics simulation, rendering, and 
animation; for example, if you are modeling a staircase, 
then you have to know that the general height of a stair 
is around 18cm and the depth is 28cm. Converting to the 
right scale as you move assets from Maya to your game 
engine is trivial, but focus on building assets in Maya at 
the correct scale for its unit size (centimeters by default). 


Basics of Modeling 


We will jump into modeling right away and introduce 
various tools along the way. Keep in mind that the only way 
to improve is to practice; there is no shortcut to get better. 


Tutorial 1.1: Modeling 
a Security Camera 


Step 1: Basic Snape. Choose Create->Polygon 
Primitives->Cube. This will create a cube at the 
origin. This cube is also referred to as box by 
3D artists. In fact, what we are doing now has 
a nickname called box modding. 
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Tips and Tricks 


In Maya, with nothing selected, you can hold down the 
Shift +right mouse button to pull up a type of menu 
called a marking menu. If you do this in the Viewport 
where there is no other object, the marking menu that 
will show up allows for the creation of new object. You 
can use this to create a cube in the same way as Create- 
>Polygon Primitives->Cube. Learning shortcuts like this 
will drastically improve your modeling speed. 





Step 2: Dimension. With a bit of research, you will 
f nd that a common security camera is about 
18cmlong, 10cmhigh, and 10cm wide. Make 
surethat the box is sdected and look to the nght 
sideof the UI. In the Channel Box (Figure 14), 


Channels Edit Object Show 
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change the Scale Xand ScaleY to 10 and change 
the Scale Zto 18 (Figure 1.5). 

Step 3: Weare making a camera that lookslikethe 
onein Figure 1.6; one of the major dif erences 
between our box and the imageisthat the 
camera's comers are rounded. 

Switch to edge mode (right-click 
and hold on the box, and choose Edge 
fromthe marking menu). Select the four 
edges across the length of the box (Seen 
In Figure 1.7). Go to Edit Mesh->Bevel or 
press Ctrl +B to bevel these edges. This 
operation splits the edge you are selecting 
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to multiple ones. To round off these new 
edges, look for the pop-up menu (labeled 
polyBevell) and change the Segments 
value to 3. Change the Fraction to 0.38 
to shrink the distance between the newly 
beveled edges. 


Tips and Tricks 


To select the four edges, you can rotate the camera view 
to look at the side of the box, and then drag a section box 
over these four edges. Alternatively, you can select one 

of them, hold down the Shift button, and double-click 
the next one. Maya will select all edges that are between 
the same loop of faces; we call this selection of edges an 
edge ring. 


Step 4: Soften edge. Swap out of Edge mode into 
Object mode by nght-clicking (and hold) and 
choosing Object fromthe marking menu. Click 
in an empty space in the viewport to deselect the 
rounded cube. Seea harsh line on the rounded- 
out comer? This is dueto that edge being 
“hard.” To soften it, swap to Edge mode and 
then select that edge and hold down the Shift 
button and double-click the next oneto select 
the entire edge ring. Use Mesh Display->Soften 
Edgeto makeall thelines of this ring a soft edge 
(Figure 1.8). 

Step 5: Frontal opening. Go to Facemode and select 
the front face of the camera. Go to Edit Mesh-> 
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Extrude, or hold Qr +Eto extrudetheface. 
This creates another segment right at the faces 
we selected. Pressthe R button to switch to the 
Scale tool. Drag the yalow boxin the middle 
of the Scaletool to scalethe new face down to 
makethe thickness of the shell. Take a closer 
look, and you can seetheleft and nght contour 
of the opening is rounded. With the Scaletool, 
scale with just the red box handle (it will tum 
yellow when you are using it) to scaletheface 
down acrossthe Xaxis. Oncedone, wedo 

not need this in the middle anymore, so press 
the delete button on the keyboard to delete it 
(Figure 1.9). 


Steo 6: Add Curvatureto the side edges. To round the 


contour, weneed more geometry. Go to Mesh 
Tools->Multi Cut. Hold down Cin, and hover the 


cursor on thesideedge. Maya will givea preview 


of the edges that will be created if you click the 
mouse. Before clicking though, hold down the 
Shift button, to snap wherethe previewed ring 


will be created. This preview will snap every 10% 


across the length of this edge. Movethe cursor 


until the preview lands at the middle of the edge, 


and click to f nish adding the new subdivisions 
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(new edges). These edges havetherr tip and end 
connected. We call this kind of line an edge loop. 
Repeat and add the same edge loop on the other 
sde (Figure 1.10). 

Step 7: Tum on symmetry. Modeling is time- 
consuming, so we want to savetime If possible. 
To do this, wecan tum on symmetry, So we 
do not haveto manually add the edgeloop 
on the other side. The setting is located on the 
second row of buttons (Figure 1.11). By default, 
the setting is at Symmetry: Of . dick on the 
drop-down arrow on thenght and choose 
Object Xto toggle symmetry on acrossthe X 
axis (Figure 1.11). After toggling symmetry on, 
sdiecting and performing commands on one 
side of the geometry will af ect the other side. 

Step 8: Add Curvatureto the camera opening. 
Double-click on any edgeof the edgeloops we 
created in Step 6to select the entireedge loop. 
Press Ctrl +Bto bevel the edgeloop and change 
theSegmentsto 2. Go to Vertex mode (nght-dick 
and hold on the shape, and choose Vertex from 
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the marking menu) and sect the vertex in the 
middleon the edgeof the hole. Usethe Move 

tool (W) to drag it awayfromthecenter a little 
Select the vertex above the middle vertex, hold 
down shift, and click on the vertex below the 
middie vertex to add it to the selection. Drag then 
also away fromthe center. Work your way around 
the opening and adjust the vertices until you get a 
proper curvaturefor theside (Figure 112). 

Step 9: Extrude the inner face. Double-click on any 
edge of the hole to select the edge loop around 
the hole. Hold down shift and left-mouse- 
button and drag the loop inward a little; this 
is a quick shortcut to extrude a new ring of 
polygons. Select the edge ring along the newly 
extruded edge and hold down the Shift +right 
mouse button. In the resulting pop-up menu, 
select Soften/Harden Edges->Soften Edge; this 
will make the inner edges soft. This command 
is the same command in the Mesh Display-> 
Soften Edge. Hit the R button to switch to the 
Scale tool. Hold down Shift again and drag 
the yellow boxin the middle to extrude a new 
small ring of polygons. Switch to Movetool, 
hold down shift and drag the new edgering 
toward the back of the formto f II out the inside 
(Figure 1.13). 
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Tips and Tricks 


Shift +right mouse button is a very common shortcut. 
Basically, it will pull up tools or commands to the current 
element you have selected. If nothing is selected, doing 
this will pull up a wide selection of primitive polygons. 
Almost all commands we need can be found in this 
pop-up marking menu. 





Sep 10: Camera lens. dick in someempty area of 
the Viewport to deselect the camera body. With 
nothing selected, hold down the Shift Hight 
mouse button and chose Gylinder. Go to the 
Channa box and set the Rotate X to 90. This will 
rotatethe cylinder 90 degreesin Xand lay the 
cylinder down. Scale and movethecylinder so 
that it isroughlythesizeof thelens of the Camera. 

Step 11: Lens frontal rims. Switch to Vertex mode. 
Select the vertex at the center of the front faces, 
hold down the Gn +nght-mouse button, and 
in the resulting pop-up marking menu, chose 
To Faces->1o Faces. This will select all faces 
that sharethis vertex. Tum of thesymmetry 
(remember up in the second row of the interface). 
Press Rto go to the Scaletool and hold down the 
Shift button and drag the yellow box to extrude 
theface in. Using the Movetool, hold down the 
Shift button and drag the face back in; keep on 
extruding with Scaleand Movetoolsto create all 
therimsof thelens (Figure 114). 

Step 12: Bevel the rim. Select the harsh edge loops 
on thenmsof the lens (remember, you can do 
this by double-clicking on an edge while in Edge 
mode) and press Qr +B to bevel them. Select 
all the edges in thefront of the lens, do a Soften 
edge command to soften the edge of the lens 
(Figure 1.15). 

Step 13: Curvature of the lens. Select the vertex at the 
center of the lens. Hold down Girl +right mouse 
button and chose To Faces->Io Faces. Switch to 
the Scaletool and hold down the Shift button 
while you drag the yellow box to extrudethe 
faces down to about half of the onginal size. Use 
the Movetool to drag the faces forward a little. 
Grab the vertex at the center again and moveit 
forward a bit more. Select the edge loop around 
the center vertex and press Ctrl +B to beve it. 
This will give usthe curvature we need for the 
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lens. Finally, soften the edge loops we created to 
makethe lens feel smooth (Figure 1.16). 

Step 14: dean up history. Maya remembers 
everything we've done and stores thisin the 
Input stack under the Channd Box (Figure 1.17). 
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Go to Object modeand drag a big 
selection box to select both the shell and 
the lens of the camera. Go to Edit->Delete 
by Tyoe-sHistory to clean up the history. 
This will makeall the construction history 
disappear (the shortcut for this operation is 
Alt +Shift +D). It is important to ddetethe 
history of the moda regularly to ensurethe 
mode is sable and thesceeis not getting 
heavier and heavier. 

Step 15: Outer shell. Select the outer layer of faces of 
thelensthat wemadefroma box. To do this, go 
to Face modeand grab one of the faces that goes 
across the depth of the moda. Hold down Shift 
and double-click the next oneto grab the whole 
loop across the depth of the moda. Hold down 
Shift +right-mouse button and chose Duplicate 
Faces. Dragging the arrow that isfacing away 
of thefacethat the arrows aresitting on, this 
Duplicate Faces command creates a new model 
fromthe faces selected. This allows you to shift 
the faces away so we can easily create a shell 
(Figure 1.18). 
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Step 16: Tweak the shape. Figure 1.19 shows 
a sequence of steps using thetechniques 
Introduced in earlier steps. Try following the 
images to match the shape. 

If you need help, the steps are: Grab the 

Outer shell we created in Step 15 and use 
the Scaletool to stretch it longer. Hold down 
Shift +right mouse button and chose Multi 
Cut. Hold down Gin and click to add an edge 
loop closer to the back end of the shell. Press 
Qto switch to selection tool and double-click 
on any edgeof thenewly created edgeloop 
to select the whole loop. Scalethis loop up 
and drag it slight down to createthe wider 
portion of the shell. Add another loop closer 
to the front of the shel. With this loop still 
selected, press Eto switch to the Rotate tool. 
Hold down Ctr +Shift and rotatetheloop 
to tilt it forward. (Note: you can seehow the 
edge is constrained on the surface of the 
moda when rotating, which is great to create 
thetilted frontal shape.) Sect the front loop 
of faces and ddetethem. Toggle symmetry on 
and add edgeloopsto mark out the edge of 





the opening in the middle of theshell. Select 
the corresponding faces and deete them. Add 
an edge loop really closeto the edge where 
theseam between the upper and lower shells 
is. Finally, deletethe face loop in-between to 
open the seam. 

Step 17: Upper shal hole. Add an edgeloop at 
the center of the modal. Then select the new 
loop, press Qr +Bto bevel it and changethe 
fraction to 0.32. Switch to Movetool and usethe 
Ctrl +Shift tick to didethe edgein the center 
forward to mark the front edge of the opening. 
If you are not sure If theface is goneor not, you 
can go to Object mode and grab the shell and 
press Ctrl +1 to isolate it. You can press Gt +1 to 
togglethe isolation (Figure 1.20). 

Step 18: Add thickness. Grab all the faces of the 
mode! (using Face mode and ether double- 
clicking on any polygon or marquee-selecting). 
Press Ctrl +E and drag the arrow to extrudethe 
faces out to add the thickness. 

Step 19: Back arm. Create a cube. Moveand scale it 
to createthe basic shape of the back arm. Add 
an edgeloop inthe middle and beva it to giveit 
curvature. Don't forget to smooth the edges of 
the rounded back (Figure 1.21). 

Step 20: Connect back arm. Grab the back arm and 
theinner shell of the camera. Go to Mesh-> 
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Booleans->Union. This will combine the selected 
meshes, blast out the overlapped part, and fuse 
the contact surface (Figure 1.22). 


Step 21: Fix N-Gon. An N-Gon isanyface with more 


Why? 


than four edges. This can bea problemin 3D 
because it is unclear how theface should be 
divided into triangles for the rendering process. 
This can sometimes yield undesired output at the 
timeof rendering. So it’s best to rebuild N-Gons 
to eather four-sided polygons (quads) or triangles. 
The big back face isa typical N-Gon. Switch to 
Multi Cut tool, and click and drag on oneof the 
outer edges until it stops at one vertex. dick 

and drag on oneof the inner edges until it hits 
another vertex. Maya will connect thesetwo 
vertices with a new edge. Press the G button to 
commit the current operation and re-initiatethe 
same tool again. Keep clicking and dragging to 
connect lines until there areno N-Gon anymore 
(Figure 1.23). 


Notice that we had to end up with some triangles, and this 
is totally f ne; otherwise, we need to add new edge loops 





AGRE 123 UsrgtheMUt Cttod todestenawenbestorduldtheN Gnirto 
three arfouc-sckdadyqos 


to the rest of the body, which takes more performance, 
and the render result will be the same. 


Tips and Tricks 


Click on the Modeling Toolkit button (Figure 1.24) on the 
right edge of the UI to switch to the Modeling Toolkit. 
Under the Tools section, you can also see Multi Cut. Click 
on it to toggle it on, and various settings of the tool will 
appear underneath. Scroll all the way down and open 
the Keyboard/Mouse Shortcuts section. You can see how 
versatile this tool is. Experiment with these dif erent 
shortcuts to speed your workf ow. 


Step 22: Base. Create a cube, set the Scale Xand 
Scale Z of the boxto 13, and set the ScaleY to 
8. Grab the vertical edge of the cubes and press 
Ctrl +Bto beva them. Changethe Fraction to 
0.62 and Segments to 3. Moveit to the back of 
the camera body and drag it higher (Figure 1.25). 

Step 23: Base bottom shell. Select the bottom face 
and extrude it down. Scale the new faces down 
to match Figure 1.26. Next, go to Multi Cut tool, 
and in the Modeling Toolkit, toggle on Edgef ow 
under the Cut/Insert Edge Loop Tool section. Add 
an edge loop to the middle of thenewly extruded 
segment. In Figure 1.26, you can seehow edge 
f ow automatically added the curvature. 

Step 24: Base bottom am. Grab the bottom face 
again. Hold down the Shift +right mouse 
button and choose Crculanze Components. 
This will round theshape up to a perfect circle. 
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Unfortunately, it istilted, but we can f xthis by 
changing the Twist valueto makeit straight 
again. Extrudetheface in the center down to 
create the length of thearm. Using the same 
technique used in Step 23, we can create a small 
rounded bottom for theam. Finally, usethe 
Multi Cut tool to f xthe N-Gon (Figure 1.27). 

Step 25: Createthe arm bending socket edge. Sect 
the edges across the bottom of the arm and press 
the R button to switch to Scaletool. This time, 
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on theleft sde of the UI, look for the column of 
buttons we call the Toolbox. Try pressing Q, W, E, 
and Rand you can seehow to switch between 
thesetools with the keyboard shortcuts. Double- 
click on the button that is highlighted when you 
press Rto pull out the Scale tool settings. Check 
the Prevent Negative Scale option. Scalethelines 
on the Xaxis until they aref attened (they will 

not overshoot). Switch to Movetool and hold 
down the V button to tum on Vertex Snapping. 
While you are holding down theV button, drag 
the arrow of the movetool along the X axis 
(red-conegizmo) and move your cursor to the 
point lying on the outer nmof the handle to snap 
thef attened lineto that point only on the Xaxis. 
Do thesamething on theother side. Add another 
loop around the length of the handleto mark out 
the upper edge of the opening socket. What we 
aretrying to achieve here isto mark the opening 
edge of the socket. The opening of thesocket is 
highlighted in the last f gure of Figure 1.28. 
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Tips and Tricks 


Ctrl +Shift +right mouse button will also pull up the 
settings of the current tool. You can f nd the Prevent 
Negative Scale setting if you press R and then hold down 
the Qr +Shift +right mouse button. To quickly select part 
of aloop, select the beginning of the part of the loop and 
hold down Shift and double-click on the end of the part of 
the loop. This trick works on face loops, edge loops, and 
edge rings. 


Step 26: Opening the socket. Deletethe faces 
highlighted in the last f gure of Figure 1.28. Grab 
the bottom edges and extrudethem up. Scale 
themon theY axistof atten them. Switch to the 
Movetool and hold down V whiledragging the 
edges up to snap the edges to the upper comer 
of the opening. Do not changethe selection and 
hold down Shift +right mouse button and select 
the Bridgetool fromthe marking menu. This will 
bridgethetwo loops with faces. This command 
requires an equal number of polygons on the 
two loops (Figure 1.29). 

Step 27: Merge vertices. Select the edge on the 
upper comer of the opening and move it just 
a little bit in any direction. Noticethat there 
aretwo vertices overlapping instead of one 
merged vertex (Figure 1.30); this creates a tear 
in the mesh. 

Tof xit, we need to merge these vertices 
together. Press Ctrl +Zto undo the moving 
of the vertex. Then hold down Qr +Shift 
and drag over thetwo overlapping points to 
select both. Check to ensurethat you arenot 
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sdecting anything eseon the back of the 
form. You can choose Edit Mesh->Mergeto 
merge thesetwo vertices to onesingle vertex. 
Altenatively, you can hold down Shift +nght 
mouse button and select Merge Vertices, 

but this time, the Marking Menu will show a 
nested sub-menu. We just keep dragging up 
to select Merge Vertices to Center. 

Step 28: Shrink and attach the camera to the base. 
Grab the faces of the back arm of the camera 
body and scale it up or down to makethesizef t 
with theopening of the base. Movethe baseto 
attach thearmwith thesocket (Figure 1.31). 
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Step 29: Top switch. Createa cylinder (Create-> 
Polygon Primitives->Cylinder). Move and scale 
it to the opening of thetop shell of the camera. 
In the input section of the Channa box, click on 
the polyCylinderl and changethe Subdivision 
Axisto 12 (Figure 1.32). 


Why? 


We made the Subdivision Axis smaller to lower the 
polycount of the little top switch. It is such asmall part 
that we do not need the same number of loops as the 
lens. In games, polycount is important, and trimming 
away those we don't need as we work will generate 
cumulative benef ts in the long run. 


Step 30: Reduce polycount. It is always possibleto 
reduce polycount of a mode to savea little bit of 
performance. Go to Display->Heads Up Display 
and check on Poly Count. You can seeon the 
upper left comer of the viewport that we have 
1736 Tris in total. There aretwo ways we can 
reduce polycount: 

1. Delete edge loops that seems 


unnecessary. Grab the outer shell of 


27 


i CeatingGareswth Urad Engine Substance Parte, &Maa 


the camera, select the edge loop in 

the middle, and hold down Shift +right 
mouse button and chose Delete Edge. 
Notice that there is no dif erence in the 
form after deleting it. Similar cleanups are 
shown in Figure 1.33. 

2. Ifaloop cannot be completely deleted, 
triangulate parts of the loop. We clearly 
need no extra edge loop for the top f at 
surface of the outer shell, but we have 
two for the purpose of opening ahole 
on the top. To f x this, go to Object mode 
and hold down Shift +right mouse button 
and select Target Weld Tool. Click and 
drag the vertex in the middle area of the 
upper edge of the shell to the point next 
to it to weld it to that vertex. Using this 
technique, we can weld alot of points 
without af ecting the shape of the model. 
We may end up with some triangles, but 
it is totally f ne for most non-deforming 
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(not bending) forms, especially for a game 
model. Similar reducing results are shown 
in Figure 1.34. 

Keep in mind that you still want to 
avoid too many triangles; tnangles are 
harder to manage for the UV process (an 
important part of the texture process 
that we'll cover later), and they make it 
harder to do high-resolution sculpting 
(if you need to do so for complex forms 
including organic shapes). You can always 
consult the supervisors of your team to 
get their suggestions on the polycount 
if you do work for a studio. The f nal 
polycount after these optimizations Is 
1494 tris for our camera. 
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Tips and Tricks 


The Delete Edge command should be what you use 

all the time to get rid of edges. The delete button on 

the keyboard does delete the edges but not delete the 
vertices on the edge, which means that when the renderer 
triangulates, it still produces the extra triangles from those 
left-over points. 


Step 31: dean up. On thetop of the base, thereisa 
big, f at N-Gon. Grab that top face and extrude 
itin. Hold down the Shift +ight mouse button 
and select Merge Faces To Center. Select all 
modas we created, press Alt +Shift +D to delete 
all the history. Finally, do a Modify->Freeze 
Transformation to clean up thetransform. 


Why? 


You may wonder what this Freezes Transformation does. 
Well, in Maya, a model has two primary components: 
transform and shape. Transform govems where the model 
is, how it is tilted, and how it is scaled; these are ref ected 
in the translate, rotate, and scale values in the Channel 
Box. Shape governs the vertices, faces, and edges and 
how they are combined together to form the shape of the 
model; the f nal appearance of the model is the shape of 
the model moved, rotated, and scaled by the transform 
of the model. If you do recall, we have scaled the outer 
Shell of the camera, and that scale value will appear in 

the Channel Box; freeze transform will clean that up and 
bake the scale we did to the transform of the model to 
the shape of the model. Many processes later (Rigging, 
UV Mapping) do require the transform of the model 

to be baked to the shape of the model through Freeze 
Transformation so that the f nal look of the model isthe 
actual shape instead of a shape getting scaled, rotated, 
and moved by atransform. 


Step 32: Naming and organization. On the left 
sdeof the UI, thereisa pallet with a tab called 
Outline; this isa list of the currently existing 
objects in the scene. Sdect anything in the 





viewport and you can also see it highlighted in 
thelist of the Outliner. Altenatively, you can 
also select an object by clicking itsnamein the 
outliner. In the Outline, you can hold down Shift 
to select multiple objects or hold down Cini to 
deselect. 


Tips and Tricks 


If you cannot see the Outliner, go to the column of 
buttons where we have the Move, Rotate, and Scale tools; 
the last button in that column is the toggle to show or 
hide the Outliner. 


Select everything in the viewport in Object mode and 
press Ctrl +G to place them into a group. Something called 
groupl will appear in the outliner. This is a group (really a 
parent object). You can press the plus sign in front of it to 
open the group and see the children models inside of it. 
Double-click to rename any object there. For now, rename 
the group to security cam_geo_grp. Spend sometime 
renaming all other objects; the f nal naming is shown in 
Figure 1.35. 
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Tips and Tricks 


Anything inside of a group will follow the group. You 

can now grab the group in the outliner and move the 
whole collection of shapes. You can put any object or 
objects under a group by grabbing the objects f rst and 
selecting the group last and pressing the P button on the 
keyboard. This is also something we call parenting. If you 
select something inside of a group and press Shift +P, 

this will get the object or objects out of the group (called 
unparenting). You can also parent one object to another 
object instead of a group. In the outliner, you can click the 
middle mouse button to drag anything around or drag 
one object to another to parent one object under another. 


Step 33: dean up the outliner. Wedo not need 
any other objects in the scene there could be 
other empty groupsin the outliner dueto some 
operations we did to the model. Wecan grab 
anything outside of security cam_geo grpand 
deletethem. Alternatively, wecan go to File-> 
Optimize Scene Sze and let Maya clean these up 
for us. 

Step 34: Savethef le. Go to File->Save Scene, in the 
pop-up Save window, change the Filenameto 
game_set_modes, navigateto a folder that is 
Safe and easy to f nd, and press the Save button 
to save it. 


Other Useful Commands 


We have introduced some of the most important 
commands for modeling. Let’s start a new scene and go 
over afew more before we do some assignments. 


Grow and Shrink Selection 


Create a sohere (Create->Polygon Primitives->Sphere) 
and select the top vertex. Hold down Ctrl +right mouse 
button and choose To Faces->!o Faces to select the 

top faces. Hold down Ctrl +right mouse button again 
and chose Grow Selection->Grow to select all the 
direct neighbor faces. Press the G button three times 





to redo Grow Selection three more times. You can also 
f nd Shrink Selection in the Ctrl +right mouse button 
marking menu. 


Extract Faces 


With the top four rows of faces selected, hold down 

Shift +right mouse button, and choose Extract Faces. Drag 
the blue arrow to shift the face away; you can now see 
how Maya separated the model into two objects. Notice 
that in the outliner, you can see the pSpherel becomes 

a group, and there are two objects inside of it. That 
transform is the remaining construction history that you 
can use Delete History to get rid of. 


Combine and Separate 


Some commands, like Bridge, can only be used for 
component on the same object. So to bridge the 
upper shell with the lower shell (Figure 1.36), you have 
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to combine the models together into one object. To 
combine models, grab all models you want to combine 
and use Mesh->Combine. By the way, you can also see 
the Separate command right below Combine. Separate 
will separate the model into multiple ones based on their 
connectivity. 


Create Cables or Pipes 


From time to time, we may want to create a cable ora 
pipe. Go to Create->Curve Tools->CV Curve Tool, and click 
and drag in the viewport to drop down a CV point. Click 
and drag again to add a new one; keep doing this and you 
will see a curve getting created. You can hit backspace to 
roll back and drag the middle mouse button to ref nea 
placed CV point. When you are happy with the shape, hit 
Enter to f nish the creation (Figure 1.37). 


CV stands for Control Vertices. Maya will interpolate 
between the vertices to forma curve. This type of model 
is called NURBS, which uses mathematical interpolations 
between control vertices to create a form. These are 
fundamentally dif erent from the camera model (polygon) 
we created earlier. 


After creating the curve, you can still edit it by holding the 
right mouse button on it and choosing Control Vertex. 
Then you can move the CV to ref ne the shape as desired. 
The curve will be created on the grid by default. You can 
go to the front, top, or side view to create your curve 
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so that the curve snaps to the grid of that view. Go to 
Create->NURBS Primitives->Circle to create a circle. Grab 
the circle and the curve created previously, and go to 
Surfaces->ExtrudeL] (be sure to click the square to pull up 
the Extrude Options window). There, change the Result 
position setting to “At path” and change the Pivot setting 
to “Component”. Press the Extrude button, and you will 
see that a tube Is created (Figure 1.38). This Extrude is not 
the same Extrude we did with polygons; it basically places 
the circle along the curve to create a frame and then 
interpolate a shape out of it. 


You can scale the nurbsCriclel to change the radius of 
the tube, and you can still tweak the shape of curvel to 
change the shape of the tube (Figure 1.39). 


However, this tube is not a polygon or polygon-based 
(which we will need for games). So to convert it into a 
polygon-based form, go to Modify->Convert->\NIURBS to 
Polygons]. Change the tessellation method to “Control 
points”. Press the Tessellate button to convert the tube to 
a polygon (Figure 1.40). 
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Until now, you can still tweak the curves to change the 
radius and the shape of the curve. When you are happy 
with the form, select the polygonal shape and delete 
the history and delete all curves and the original NURBS 
surface as they're no longer needed. 





Tips and Tricks 


If, at any time, the tube model appears black, you can 
rotate the circle on the X axis until it f ips back to normal. 
NURBS curves and surfaces are a dif erent type of model 
that are mathematically interpolated between the 

control points we created. They are primarily used for 
architectural or industnal design. Most times, we don’t use 
this type of model in game scenarios. However, they can 
be very useful to construct a form originally (that we then 
convert into polygons). 


Extrude Along a Curve 


Another variant of creating atube isto create a curve in 
front of a face and then extrude that face along the curve. 
To do this, select both the face and the curve (Figure 1.41), 
and press Ctrl +E. 


In the pop-up dialog boxes, increase the number of 

the Divisions setting to create a smooth extrusion along 
the curve (Figure 1.42). If the extrusion is backwards, 
you can grab the curve, do a Curves->Reverse Direction 
to f xit. 
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Duplicate, Duplicate 
with Transform 


You can grab any model and press Ctrl +D to duplicate it. 
The duplicated model will be at the same location as the 
original (although you'll see the name of the new form 

in the Outliner). Right after duplicating, you can use the 
Move tool to move the new duplicate away (Figure 1.43). 
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If you want to create another duplicate and have it move 
the same distance (or rotate the same amount), you can 
press Shift +D. You can keep pressing Shift +D to have 
multiple duplications, each of set the same amount as last 
time (Figure 1.44), 


Duplicate Special 


From time to time, we may want to create multiple 
duplications but as instances. An instance is a copy that 
keeps the link of the shapes between the original and the 
copy; we can adjust any one of the duplications to update 
the shape of all others (but not transform). Grab your 
model and go to Edit->Duplicate Special. Change the 
Geometry type to “Instance”. Change the f rst number of 
the Translate to 2 (the X axis), and the Number of copies to 
“10”. Finally, press the Duplicate Special button, and you 
will see ten duplications of your model, each two units 
away from each other, and more importantly, editing any 
one of them will af ect all others (Figure 1.45). 


Mirror 


Anytime you forget to have symmetry on and want 

to make the model symmetrical again, you can select 
the model in Object mode and do a Mesh->Mirvor. Try 
dif erent axes and directions to make sure you got the 
correct side mirrored. The merge threshold should be 
as low as 0.001 if you wish to only have the vertex in the 
center mirrored. You can also change the Border setting 
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to bridge or do not merge the geometry along the axis of 
symmetry to have a dif erent result. 


Center Pivot 


You can grab any model in Object mode and do a 
Modify->Center Pivot; this will move the pivot of the 
model to the center of its bounding box. The Pivot is the 
location where the object is rotating around. It is needed 
whenever you want to be able to rotate or scale a model 
from its geometrical center. 


Change Pivot 


In any mode, you can hold down the D button on the 
keyboard and drag the gizmo to adjust the location 

or orientation of your pivot; you can also click on any 
elements on the model to snap your pivot to that element. 





A good example that we want to do this is to change the 
pivot of the body of the camera to the hinge of the arm so 
that we can rotate it around the hinge. 


Snapping 


When moving an object or its various elements, you can 
hold down the X button to snap to the grid and V button 
to snap to vertices. The snapping toggles are on the Status 
line, which is the row of buttons under the main menu. 
The snap toggles are the six buttons with a magnet in 
their icon. Try these toggles and see what they do. 


Hide Model 


You can grab any model or its other elements and press 
Ctrl +H to hide them. To unhide, press Ctrl +Shift +H; this 
will only unhide the object you are selecting (probably in 
the Outliner) if you have something selected. It will unhide 
everything if you have nothing selected. After making a 
model, name it properly, freeze transformation, and hide 
it So you can move on to the next one without the other 
models blocking your view. 


View Control 


At any time, if your cursor is in the Viewport, you can press 
the spacebar to go to the Four View layout, and this will 
show you the Top, Perspective, Front, and Side views; 

you can then move the cursor to any view, and press the 
spacebar to maximize that view. However, we recommend 
to just hold down space and drag up, down, left, and right 
to go to these views. 


Assignments 


We have covered enough commands that you are 
now able to create models of your own; go ahead and 
start modeling some of your own models in Maya, 
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and make sure you f nd references and get the correct 
measurement. Figure 1.46 shows a few examples of what 
we are looking for. 


Geometry Errors 


Sometimes in the modeling process, some errors can 
emerge. These errors might not even be readily visible in 
your model, but without f xing them, you can run into some 
serious problems later in a game engine. While these can 

be pretty technical, and the hard-core specif cs are a bit 
outside the scope of this book, it’s worthwhile to talk about 
them for a minute and - more importantly - evaluate how 
to f xthem. Here are some typical geometry errors that we 
can now check on your model: 


Non-Manifold Geometry. This geometry cannot 
be unfolded and f attened to a 2D surface. 
Typically, there isan edge shared by morethan 
two faces or inconsistent normal directions. 
This type of modal will confuse the renderer on 
which side isthe outside of the geometry. 





Lamina Faces. Two facesthat share all of their 
edges. Typically, this is caused by duplicating and 
combining meshes that have the same faces. 

Zero Length Edge. A seif-descriptive stuation in 
which an edgehas no length. 

N-Gon. \Wehave covered N-Gon already; any face 
with morethan four sdesisa N-Gon. 


Luckily, even though the theory behind these errors is 
abstract, f xing them Is usually pretty easy. To clean up 

the models, go to Mesh->CleanuplL]. Under the Fix by 
Tessellation section, check on “Faces with more than 

4 sides”. Under Remove Geometry, check on “Lamina faces 
and Nonmanifold geometry”. Press the Cleanup button; 
this will, in theory, clean up all the errors. Maya may 
choose to delete some of the faces because they are error 
geometnes; make sure you check around the model and 
recreate any missing models. 


Tutorial 1.2: Modular Set Pieces 


Making acompelling and complex environment is a 
daunting task. To ease the pain, we are going to adapt to 

a modular workf ow. This means we will make reusable 
pieces that are easy to combine with each other, like a 
system like Lego building blocks. The props we have 
made previously as assignments are already designed for 
that purpose, but to make the foundation of our game 
level, we need a more unif ed system. This means we need 
to have a chart of sizes that our models will have to exactly 
match, so they can be assembled seamlessly. 


There are two size systems we can use: decimal and binary. 


For decimal, we will havesizes like 10, 20, 30, 50, 
100... 

For binary, we will havesizeslike 16, 32, 64, 128, 
256, 512... (both in cm) 


Both systems are popular, and we are going to follow the 
binary system. The author has found that it is easier to 
combine modules seamlessly and easier to match with 
textures sizes, which is also binary. 
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Grid 

Go to Display->GridZ]. Set the Length and width to 256, 
and set the Grid lines to 64 and Subdivisions to 4. Drag 

the slider of Grid lines and numbers to make it a blue color 
and press Apply and Close. This will create a grid that has 
its edge 256cm away from the center and a blue grid line 
every 64cm with four extra divisions in-between every 
blue grid line, which makes every grid 16cm long. 


To verify our sizes, go to Windows->General Editors-> 
Content Brower. Under the examples category on the left 
side of the window, choose Modeling->People. Drag a 
standing character to the viewport to import the human 
model; the height of the model should be slightly shorter 
than half of the grid length (Figure 1.47). If your character 
appears gray, hit 6 on your keyboard to have Maya show 
the materials as well. 


Create a Base Floor 


Step 1: Basef oor dimension. Let’s hide our other 
mode's, so we can start our new mode with 
nothing ese visible. Create a cube, set its 
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Why? 


Translate Y to —8, set its Scale Xand Scale Zto 
256, and set its Scale Y to 16. Switch to the Move 
tool and hold down both D and V buttons, and 
drag the pivot of the boxto the upper comer on 
the negative Xand Z quadrant. Release all the 
buttons. Now, hold down X button and drag 
thecenter of the gizmo to snap the moda to the 
positive Xand Z quadrant (Figure 148). 


We want the model to be easily snapped together. 
Positioning the pivot to the comer of the box is extremely 
helpful for the snapping. We also want the pivot to be at 
the center of the world to avoid any of set. 


Step 2: Floor edgetnm. To help in adding trimsto 


thesideof thef oor, grab thetop face, and press 
Ctrl +E. Set the Of set setting to 16. This will give 
usa rimon the outsideof thef oor (Figure 149). 
Namethis moda f oor Ol and hideit. 

Weare now donewith this module. Every 
timewef nish a module moda, we can name 
it, hide it, and moveon to the next one. This 
way, all of our models are created in one 
Maya f lefor easy access. This also allows us 
to maintain the scale of our game. We arenot 
planning on making a wholelot of models for 
our environment, so keeping them all in one 
scenef leis manageable. But if you'd rather, 
you are more than welcometo create new 
f lesfor extra mode's instead. But be sure you 
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maintain consistent Gnd settings across the 
various scenes if you do so. 

Step 3: Base wall dimension. Create a cube and set 
its Scale Xto 256, Scale Y to 512, and Scale Z 
to 32. Snap its pivot to the lower back comer 
and then move it to the center of the grid 
(Figure 1.50). 
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Step 4: Add bottomtrim. Add an edge loop 
toward the bottom of the wall module. 
Extrude out the bottom face and movethe 
top edge of the extruded face down to create 
a bottomtrim (Figure 1.51); namethis model 
wall OL 

Step 5: Arch wall. Follow the steps of Figure 1.52. 
Createa pipe (Create->Polygon Primitive->Pipe). 
Under the Input section of the Channa Box, click 
on polyPipel and set the Radius to 128, Haight 
to 512, and Thickness to 32. Set the Rotate Z of 
the moda to —90. Delete the frontal and bottom 
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quarters of the pipe. Next, hold down D and V, 
and snap the pivot of the pipeto its back sde 
comer. Hold down Vand snap the pipeto the 
top of the wall we created in the previous two 
steps. Duplicate the wall and delete its top face. 
Combineit with the pipe by selecting both the 
wall and pipe and choosing Mesh->Combine. 
Grab the vertices of the pipe and thetop of the 
wall and while holding down Xdrag then down 
until thetop of the pipeisthesameheight as 
theheight of theonginal wall. You can go to 
theside view to check out the alignment. Grab 
all the vertices and hold down Shift right 
mouse button, go up and up again (or choose 
Edit Mesh->Merge). This will mergethe vertices 
between thetop of the wall and the bottom 

of the pipe. Double-click on one of the edges 

of the hole in front of the pipe and hold down 
Shift +right mouse button. Choose “Fill hole”. 
Namethis moda wall_ 02. 





Tips and Tricks 


Step 5 has many steps, but the idea is simple. We 
want an arch on thetop of the wall. Whenever 
weneed something complex, we can break it 
up to smaller primitives. When we createthese 
primitives, we can snap themtogethe,, combine 
them, and mergethe vertices. 

Step 6: Wall frame. Copy the arch wall we created 
and move its pivot to the ongin. Change its 
Scale X to 0.25. Grab the front faces and press 
Ctrl +E. Change the Local Translate Z of the 
extrude to 16. Extrude the same amount 
again, but this time, scale the faces in on 
the X axis to create a little taper. Use scale 
or snapping to flatten the top front faces 
(Figure 1.53). 

Step 7: Wall frame detail. Grab thefacesin the 
front middle part of the model and hold down 
Shift right mouse button and chose Duplicate 
Faces. Set the Local Translate Zto 16. Grab the 
bottom vertices and drag them up. Bridgethe 
bottom edges and bevel the primary tuming 
edges. This will give us extra volume you can 
create additional ones to make the model 
morecomplex (Figure 1.54). Namethis moda 
wall_frame OL 
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Tips and Tricks 


Always name and clean up your models when you have 
f nished them. Your future self will thank you for making 
everything clean and tidy. 





Step 8: Wall comer. We can create rounded comers 
for our rounded walls for when walls meet as we 
assemblethem. Duplicate and snap our modules 
likethef rst f gurein Figure 1.55. You can hold 
down the] button while rotating to nap your 
rotation for every 5 degrees. It is important that 
the modules are snapped to each other exactly. 
Have one blue (64 units) grid gap between 
thetwo hallways or comidors and thetuming 
portion of thef oor. This isto ensure that there is 
space for the rounded transition part. 

Moving on to thesecondf gure of 
Figure L55, select thesetwo walls of the 
tuming point, duplicate (Gin +D) them, and 
combine (Mesh->Combine) them. Grab the 
two columns of the faces that will connect to 
thetuming portion. Hold down Shift +nght 
mouse button and chose Bridge Faces. The 
result may look messy, so changethedivision 
to 7, and Curvetypeto Blend. The resulting 
middle part is going to be our tuming 
module; deletethe extra ones on thesideand 
bridgethe holes on thesideto f nish it. The 
outer comer is donethesame way. 

Step 9: Floor variations. Create a few varying sizes 
for thef oor, likethe gap we need tof Il for 
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thetuming of the comdor we did for Step 4 
(Figure 1.56). The sizes we choose to use are: 
256 x256 X32, 256 x128 x32, 256 x64 x32. 

Step 10: Stair frame. Create a cube and set the Scale 
X, Y and Zto 256. Snap its pivot to the back lower 
left comer and snap the cubeto sit at the postive 
quadrant. Move (and snap) its bottom and top 
row of vertices to makea tilted frame for the 
stairs. Its bounding box length is 6 x64 units (Six 
blue gnds). The footing of the shaft is 64 units, 
and the thickness of the shaft is 16 units (one 
gray grid). The results look like Figure 1.57. 

Steo 1: Stairs. Duplicate the stair frameto create 
the other side. Snap the duplication so that their 
whole width together is 256 units. Create a box, 
make its Scale X 32, ScaleY 8, and Scale Z 200. 
Moveit to thef rst stairs location. It should be 
around 18 units high. Bevel all the edges of the 
box, and extrude fromthetwo sidefaces to make 
the connection to the frame. Bevel the bottom 
edge of theframeto add a little detail. Fixthe 
N-Gon after the beva. Finally, bevel the edges of 
the frame (Figure 1.58). 

Step 12: Stair handrail. Go to Create->Curve Tools-> 
CV Curve Tool; we have covered this tool 
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previously in the part about extruding along a 
curve. Usethe Curvetool to create the prof le of 
the handrail. Take care to make sure you have 
enough points on the arcing part; the amount 
of points you place will determine how many 
segments you will haveon thef nal polygon 
Shape. Use Extrude along curvetechniques to 
create the handrail. Addition columns can be 
created using cylinders (Figure 1.59). Remember: 
be sureto covert the NURBS form into polygons. 
Step 13: Other modular pieces. Other modular pieces 
are made with thesametechniques covered 
previously; hereis a list of all the pieces modeled: 
Walls - Therearethreewalls, f ve wall frames, 
and some random small blocks. The size of 
thetall onesis 256 x512 with a thickness of 32 
(Figure 1.60). 
Arcs- Thesearcs are having a radius of 256 
units and a thickness of 32; an outside arc, 
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a wall, and a wall bottomtnmarealso built 
(Figure L6l). 

Floor- Floors with 256 x256 x32, 256 x128 x32, 
256 x64 x32 are built to create hallways with 
dif erent sizes. Two grid modules arealso built 
(Figure 1.62). 

Pipes- Pipes came with threesizes, each with 
a radius of 16, 8, and 4. Besureto build some 
tuming structures to support complicated 
combination (Figure L63). 

Stairs- Wehavetwo stairs, a higher onewith 
a 256 units devation and a lower onewitha 
64 units devation. Handrails were also built 
to support variations (Figure 1.64). 

Windows - Window camein four sizes: 

256 x128 x32, 128 x128 x32, 512 x512 x256, 
96 x64 x160 (Figure 1.65). 

Thereare57 modular pieces. It ishard to 

determine how many are needed, so itis wise 

to build less and try creating a hallwayora 

room and see if more modules are needed. 
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Step 14: Hero assets. Hero assets are the assets that 
we only use a few times and so might need a 
bit of extra care and detail. We will createtwo 
hero assets for thef nal scene; the creation 
process of these hero assets is tedious, expect 
to spend a lot of time on then and havea 
higher polycount on these assets. But even 
though thef deity might be higher for these 
assets, the tools and commands used to create 
them are no more than what we have covered 
(Figure 1.66). 
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Conclusion 


We have f nished the environment modeling part of 

our games. Well, of course, we've only created the 
individualized separated pieces; currently they aren’t 

a level...yet. However, we will move them to the game 
engine and assemble them into our awesome level later. 
However, before we do that, we still need to go through 
UV mapping and Texturing so that our models are not 
white ghosts. 


If you are able to complete these forms in this chapter, 
you're in good shape. If it is overwhelming and you'd 
rather move onto other stages, these completed models 
are available on the support website. 


We will move on to the UV Mapping of our assets in the 
next chapter. 





Maya Set UV 





UV Mapping is a pretty tricky concept for beginners but 
quite straightforward after you grasp the essence. It is 

a 2D coordinate to map a 2D image to the surface of 
the 3D model. Let us start with creating UVs for our f rst 
and simplest modular asset, the 256 x256f oor piece 
(Figure 2.1). 


The UV Editor 


Go to the Workspace at the top right comer of the UI, and 
In the drop-down list, choose UV Editing; the viewport 
now splits into two windows. The UV Editor on the right is 
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the place we edit our UVs. You can hold down Alt +middle 
mouse button to pan the view and Alt +right mouse 
button to zoomin or out. On the right of that window, 

we can also see a UV Toolkit panel, which contains many 
useful tools and commands to edit UV. 


Select our f oor piece; inside the UV Editor, you can see a 
blue shell that looks like an inverted T, this is the default 
UV of a cube. If you do recall, we started with a cube (if it 
is not blue, move the cursor to the UV Editor and press the 
number 5 button). Click on the checker icon at the row of 
buttons on top of the UI in the UV Editor. You can now see 
a checker texture getting displayed in both the UV Editor 
and on our model in the viewport (Figure 2.2). 


Select the top face of the f oor, and you can see how a 
face in the UV Editor is also highlighted. That face in the 
UV Editor is the UV of the top face of our 3D model. Go to 
the UV editor, press Wto switch to move tool, and move 
this face in the UV editor to the U letter on the checker 
texture. You should also see the U letter appearing on the 
3D model (Figure 2.3). 


This face-to-face match is how UV works. UV is a 2D 
representation of the 3D model; it def nes how an image 
can be mapped to the surface of the model. UV is also like 
af attened shell of the 3D model if you will. This checker is 
a convenient way to preview how our UV maps texture on 
our model. 
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UV Points 


Other than edge, face, and vertex, there is a fourth 
element called UV points. These UV points are a reference 
to avertex in 3D in the UV space, and they are the building 
blocks of the UV of the model. Go to the UV Editor, hold 
down the right mouse button, and chose UV. You can 

now select UV points, and you can move, scale, and 

rotate them around just like vertices in the UV Editor. 
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Moving UV points af ects the shape of the UV and af ects 
the mapping of the textures. Figure 2.4 shows how scaling 
down the UVs of the top face down makes the letter U 
appear bigger than before. 


UV Tiles 


The checker texture has U1V1 1001 written on it, and 

this isthe UV tile name. Pan the UV editor up, and you 

can see U1V2 1011 above U1V1 1001. This U1V2 1011 
Square area Is just another UV tile. Hold down the right 
mouse button in the UV Editor and chose UV; drag a big 
selection box to select all the UV points. Press the W 
button to switch to the Move tool, and drag the UVs to the 
positive, X direction. You can see now Maya places more 
checker textures to the tiles your UV is overlapping with 
(Figure 2.5). 
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In many modern renderers like Redshift, Octane, Amold, 
or V-Ray, UV tiles can be used to apply multiple textures to 
one model. Every tile can receive a unique texture, but for 
our game engines, this feature is not supported. We have 
to ensure that all of our UVs are placed inside the U1V1 
tile. You can grab all the UVs again and move them back 
and scale them down. You know they are all inside of UIV1 
when Maya only shows one checker with UIV1 1001 on it 
(Figure 2.6). 


Tips and Tricks 


You are probably wondering what “U1V1, U2V2...” and 
“1001, 1002...” mean; they are essentially dif erent UV tile 
naming conventions that dif erent texturing software 
adapt. U1V1 is a system ZBrush uses. ZBrush is a sculpting 
software that allows artists to sculpt more detail on the 
surface of the model. 1001 is f rst used by Mani, a super- 
high-end texture software designed to create textures for 
movies. The texturing software we are going to use later is 
Substance Painter, which also adapts the 1001 system. 
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Cut UV 


Select all the edges of the top face and go to the UV 
Editor. Hold down Shift +right mouse button (Remember 
that in the previous chapter, we talked about how this 
Short cut will bring up the commands suited for the 
elements we are selecting), and chose Cut. You can now 
see these edges appearing thicker; switch to face mode 
and select the top face. Move the face around in the UV 
Editor. You can see how it is detached from the rest of the 
UV. You can now move it freely without af ecting the UVs 
of other faces (Figure 2.7). 


Try to select one of the edges of the detached UV and 
move it in the UV Editor; you can see how another edge 
also moves. This is because they are the same edge on the 
actual 3D model. In other words, they are two references 
of the same edge. UV points are also references of 
vertices, and sometimes they reference the same vertex. 


The Problem 


Looking at the checker texture mapped to our model, 

you can immediately see the outer frame of our model 
has a super-stretched texture. This stretching ef ect is due 
to the UV of these faces not being laid out correctly. We 
want all UVs of all faces to be f attened with the correct 
proportion and not overlapping with each other. We often 
don't rely on the default UV. Now, let’s start creating the 
UV of our f oor from scratch. 





UV the Floor 


Step 1: Project the UV. Select thef oor piece in object 


mode, and freeze its transformation. Navigate 
the viewport so wearelooking at the mode ata 
non-straight angle. Go to UV->Planarl]. Inthe 
pop-up Planar Mapping Options window, go 
to the Project fromsection, and chose Camera. 
Check on keep image width/height ratio and hit 
the Project button. You can now seea projected 
f gure of our mode in the UV Editor. This planar 
projection projects our moda form our viewing 
angle in 3D to UVsin the UV Editor, or to the UV 
space (Figure 2.8). 
Step 2: Cut the UV Open. The projection will only 
project the mode but will not be making a cut. 
Imagine you got a box package delivered to you. 
Without cutting the plastic tape open, there is 
no way you can f atten it to a 2D surface without 
faces overlapping each other. Let’s check of the 
checker texture, so it is easier to seethe edges. 
Select all the edges of the bottom face, 
go to the UV Editor, hold down Shift +nght 
mouse button, and chose Cut to cut then 
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open. Hold down the nght mouse button in 
the UV Editor and chose UV Shell. UV shell is 
a Shell of UV that all faces of it are connected. 
Click on thetop faceof the moda in the UV 
Editor, all UVs that are connected to the top 
face (or not cut out from it) should all be 
selected. Usethe Movetool to move it away. 
Grab the four edges of thetop part and four 
vertical edges of thef oor and cut themalso. 
The edges we cut should appear thicker 
(Figure 2.9). 

Step 3: Unfold. Select all the UVs in the UV Editor, 
hold down Shift +right mouse button, chose 
Unfold->Unfold. Maya automatically tries its best 
to unfold the UVs to the same 3D shape and with 
the same proportion for each face (Figure 2.10). 

Step 4: Orient UV. Currently, all the UVs aretilted. 
Tof xtheonentation, go to the menus of the UV 
Editor, chose Modify->Onent Shells. Maya tries 
its best to makethem straight. You can now 
grab any UV shell and rotatethem while holding 
down the} button to adjust their rotation 
(Figure 2.11). 
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Tips and Tricks 


There is no telling how a UV should be oriented, and 
sometimes it doesn’t make a huge dif erence, but we want 
similar UV shells oriented the same way most of the time. 


Step 5: Layout the UV. Grab all the UVs, hold down 
the Shift and nght mouse button, and chose 
Layout->Layout UV. The UV shells arenow 
automatically rearranged into the U1V1 space. 
Thereisa small problem with this default 
behavior: thereis no gap between the UV shells; 
there is also no gap between the edge of the 
UI1V1 tile and the UV shells. 

Many texture software bleed the color 
out of the UV shell a little to avoid the seam 
reading the background. Go to the Layout 
command again, but thistime, click on the 
box icon of the command to pull out the 
Layout UVs Options window. Under the 
Layout Settings, change the Shell Padding 
and Tile padding to 10. This setting ensures 
that all UV shells areat least 10 pixels away 
fromeach other, and it also ensures they are 
10 units away fromthe edge of the UV tile. 
Press the Layout UVs button, and you can see 
thedif erencethistimein Figure 2.12. 


Tips and Tricks 


Pixels are the smallest unit of a picture. If you Zoom in 
close enough to any picture on a computer, you can see 
small, square, solid colors arranged in rows and columns. 
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All digital pictures are put together this way. When we are 
talking about the resolution of a computer screen, like a 
4K monitor, the 4K means there are around 4000 pixels 
across its width. The exact number of pixels a 4K screen 
has is 3840 pixels on its width and 2160 pixels on its 
height. 


Steps 1 to -5 can be used for almost all UVs, even 
for a complicated character model. Do a planar 
projection to project our model to UV space, cut 
the seams wethink are needed tof atten it, and 
then Unfold, Onent, and Layout. 

There isno universal rule on how UV 
should be cut and arranged. However, it 
iSessential to know that if you don’t cut 
enough, your UV is destined to be stretched. 

If you cut too much, it’s hard to arrange. 
For every cut you do, thereis a potential 

to see discontinued texture pattems on 
that edge, and we call this a seam artifact. 
Seam artifacts becomeless of a problem 
with modem texturing software. Onelast 
important note: you want to cut any edge 
that isa hard edge. Wearegoing to explain 
why later. 

Let's do the UV of our security camera. 

We have updated the secunty camera 
and separated the vertical armfromthe base 
(Figure 2.13). 

We need the separation to rotatethe 
camera on the Y-axis. Changes like this 
happen all thetime, especially when the 
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mechanic of the object (arm rotation in this 
case) was not taken into consideration. 

Step 6: Project the UV. Select all the mode's of the 
security camera, do a planar projection the same 
way we did in Step 1 (Figure 2.14). 

Step 7: Cut the outer shell. Select the outer shell of 
thesecunty camera, press Cin +1 to isolate it 
(Gin +1 isthetoggle for isolating the current 
saection). Set symmetry to Object X (This could 
be easily Object Zif your mode is rotated 
dif erently). Go to UV->3D Cut and Sew UV tool, in 
our 3D viewport, click and drag on the outer and 
inner edge loops of thethickness of the shells to 
cut then open. You can also double-click to cut 
an entire edge loop. Holding down Qr while 
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dragging or double-clicking sews the edges back 
together. Go ahead and cut edges at the primary 
tumings of the faces along thethickness of the 
moda (Figure 2.15). The 3D Cut and Sew UV tool 
adds color codding to shells oncethey are cut of . 


Tips and Tricks 


Cutting using the 3D Cut and Sew UV tool is no dif erent 
than selecting the edges and cutting them in the UV 
Editor. Sometimes one method is easier than the other, and 
there are always multiple ways to achieve the same thing. 
Experience can help you to decide which way is faster. 


Step 8: Unfold. Grab all UVs in the UV Editor, go 
to the UV Toolkit, under the Unfold section, 
click the Unfold button. This oneis also no 


dif erent than using the unfold command in the 


Shift +right mouse button marking menu. The 
author prefers the marking menu because one 
fast drag invokes the Unfold command right 
away (Figure 2.16). 

Step 9: Optimize. With all the UV selected, go to the 
Modify menu under the UV Editor. Gick on the 
square icon on thenght side of the Optimize 
command to pull up the Optimize UVs Options 
window. Set the Iterations under the Optimize 
Options section to 100; to repeat it 100 times, 
click Apply and Close. You can seethe UV has 
Slightly changed; what Maya does here isto 
move UV points around to reduce stretching. 

In case you haven't tned, you can also f nd the 
Optimize command in the Shift +nght mouse 
button marking menu and the UV Toolkit. 

Step 10: Orient and Layout. Do an orient shell and 
layout exactly like in teps 4 and 5 (Figure 2.17). 

Step 11: Do the UV of the inner shell. Go ahead and 


create the UV of the inner shell the same way; the 


cut and result are shown in Figure 2.18. 
Step 12: Do the other UV.. You can also createthe 


other UVs the same way. Figure 2.19 snowsall the 


cutting choices of the rest of the pieces. 
Step 13: Combine UV.. Select all the mode's of the 


security camera, go to the UV Editor, grab all the 


UNM, do a Layout UV command (Figure 2.20). 
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Why? 


We put all the UVs of all security camera models in one UV 
tile. By doing so, we can create one texture for the entire 
camera and save performance for our game. It is essential 
to pack UVs together in a uniform and organized way. 
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Texel Density 


Now we have two models UV mapped, so let’s talk about 
texel density. Grab all your UVs of the camera, and go to 
the UV Toolkit. At the bottom of the Transform section, 
you will see a Texel Density (px/unit) part. Click on the 
Get button and you can see a value calculated; in our 
particular case, it is 3.1016. This value means there are 3.1 
pixels per unit (cm) if you are using a texture of 512 x512 
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resolution, which is def ned in the Map Size section. Select 
the f oor and press the Get button, and the value we get is 
0.97. These two values indicate that the Camera is having 

3 x3 times, which is nine times the resolution of the f oor. 
You can also visualize the dif erence in the viewport with 
the checker texture turned on. You can see how the edge 
length of the square on the camera is roughly three times 
smaller than the f oor. 


You may wonder what is so important about this. Through 
the experience we have gathered while developing 
games, consistency of the texel density helps a great 

deal in maintaining assets, saving performance, and 
having aconsistent graphic. Ideally, 1 pixel of the texture 
on your model gets rendered as 1 pixel on your screen. 

A texture that has a higher resolution than that wastes 
performance. A texture that has a much lower resolution 
causes a pixelated or blurry result. If your texel density 
isnot the same on dif erent models, then some of the 
texture may feel more detailed than others, which causes 
inconsistency. 


Chose the Right Texel Density 


How high the texel density is depends on the camera 
view of your game. For third-person or f rst-person 
games, we can get to an object closer, and so we need 
more texel density. A top-down viewing angle requires 
lesser texel density. Strictly soeaking, we also want 

the models closer to our player to have higher texel 
density, while things further away can have lower texel 
density. 


Some games have two or three levels of texel densities. 
The assets to which the players can get as close as they 
want (characters, walls, weapons) have the highest texel 
density. Assets that are farther away that the player 
cannot reach but not very far (high ceiling, building, or 
trees outside of the window) have medium-level texel 
densities. Background assets (mountains, sky, the bird in 
the sky) have the lowest texel density. 





Luckily for us, we are making an interior in which the 
player can pretty much get close to anything; so we are 
going for one consistent texel density. There are plenty of 
guidelines on exactly what the texel density is for various 
games. In our case, we aim for a medium- to high-quality 
texel density, like Uncharted 4. Our textures are going 

to range from 512 x512 pixels to 4k (4096 x4096 pixels), 
and the texel density is going to be around 5.12 pixels per 
centimeter or 512 per meter. 


It is worth noting that we are not aiming for af xed 
number for every asset. The texel density is allowed to 
vary alittle; the only way to judge if something is too far 
of isby actually looking at it in the game engine. 


Step 14: Assign material and mark resolution. Go to 
our security camera, set the Map Size of the Texel 
Density section in the UV Toolkit to 1024, and 
press the Get button. Wecan see weare getting 
a texa density of 6.2, and we will settle with this 
for our camera. Select our camera mode's, hold 
down the right mouse button, chose assign new 
material, and select Blinn asthe material. Hold 
down thenght mouse button again on any of 
the modas and chose Material Attribute to pull 
out the attribute editor on thenght sideof the 
Ul. In thef rst text f dd of the settings, change 
thenameof the material to SecuntyCamera_ Ik. 
Naming the materials likethis helps us remember 
thetexture resolution weintend to usefor our 
modes. 

Step 15: Packing Floor. Go ahead and UV map all of 
our f oor modules: there aref ve of them. Grab 
all of them, go to the UV Editor and sdect all 
the UVS. Go to the Layout UV option, Change 
the Packing Resolution under the Pack Settings 
section to 4096. Set the Texture Map Size under 
Layout Settings to 4096, set Shell Padding and 
Tile Padding to 10, and pressthe Layout UVs 
button. Maya should now pack all the UV in to 
the U1V1 space. 

Go to the Texel Denstty section under the 
Transform section of the UV Toolkit and set 
the Map Szeto 4096. Press the Get button; we 
get a resulting value of 4.2146, which is close 
enough to our goal of 5.12 pixels per unit 
(Figure 2.21). 
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Why? 


We packed all of our f oors into one UV shell and used a 
4k (4096 x4096) texture for them with a resulting texel 
density of 4.2146 pixels per unit. Packing similar assets is a 
common practice; we pack models together to have a big 
texture for all of them, and this kind of texture is called an 
atlas. By using atlases, we are reducing draw calls from the 
game engine. 4K, of course, is a bigger texture and takes 
longer to load and needs more space in the memory. 
However, in many cases, the bottleneck is not how much 
memory is used, but rather how often you are reading and 
freeing memories. The standard may also vary from studio 
to studio; consult with your technical guides to determine 
the best practice for your platform and engine. 


UV the Pod 


One of the props we did for the environment was the pod 
(Figure 2.22). 


The pod is the place where genetically engineered 
soldiers are created. It has a console, a tank, cables, and 
keyboards. Notice that we have two models for the pod, 
the glass and the rest of the pod. We do this because 

the glass is fundamentally dif erent material wise. It is 
safe to separate these special types of materials, which 
makes it easier to work with later on in the game engines. 
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The glasses of the windows of our modular pieces are also 
separated the same way. Let’s move on to the UV of the 
pod and introduce some more tricks of UV Mapping. 


Step 16: Grab all the mode's of the pod, do a planar 
project like before. 

Step 17: Cut the cylindrical tank glass of the pod. Got 
to the back of the pod, select the vertical edge 
loop at the center of the glass of the tank, go to 
the UV Editor, and do a Cut command. Select all 
the UVs of theglass of thetank and do an Unfold, 
and an Optimize command (Figure 2.23). 

Step 18: Console monitor. Select the faces that 
belong to the display of the console. In the 
UV Editor, switch to face mode, hold down 
Shift +right mouse button, chose Create UV Shell. 
Switch to the Movetool and movethe shel away 
fromits onginal position. You can seehow the 
outer edges are now cut; use Create UV Shell isa 
dif erent way to separate UVs. Do an Unfold and 
Optimize command on the UVs of the display 
(Figure 2.24). 

Steo 19: Keyboard UV Mapping. Select all the faces of 
thekeyboard, and press Cin +1 to isolatethem. 
Select the back faces and do a Create UV Shell. 
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Apply an Unfold and Optimize command, and 
movethe shells out. Noticethat the Create UV 
Shell command also switches the selection mode 
to Shell. We can usethisto select all the keyboard 
buttons quickly, movethen out, unfold, and 
optimizethen (Figure 2.25). 


Tips and Tricks 


At the stage of cutting and unfolding UVs, we just do not 
worry about their arrangement. That’s why we are moving 
them around freely. We can easily pack them back to the 
UIV1 space with the Layout UV command. 
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Step 20: Separate other parts of the keyboard. 
Select the face loop across the thickness of 
the keyboard, and select the face loop that 
reoresents the depth of the small monitor at 
thetop of the console. Add select the loop that 
reoresents the depth of the depression of the 
area of the keys as well. Do a Create UV Shell 
command and movethe separated shell out 
(Figure 2.26); you can see how easily wecan 
separate UVs with this create UV shell trick. 

Step 21: Cut and unfold other parts of the keyboard. 
Select the edges highlighted in Figure 2.27 and 
cut them, grab all the UVs of the keyboard, 
unfold, and optimizethem. 
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Step 22: UV Mapping the Cables. We have 
meticulously placed the cables for this model 
to givethe moda a sense of complexity and 
functionality. As complicated as they appear, the 
UV part isnot as hard as you think. All wehave 
to do isselect an edgeloop acrossthe length of 
every individual cable, do a Cut, and then unfold 
and optimize (Figure 2.28). 

Step 23: Other parts of the console. Other parts of 
theconsole should be straightforward; go ahead, 
and cut and unfold the rest of the console part. 

Step 24: Packing. Grab all UVs of the pod, do a 
Modify->Onient Shells. Grab then again and 
do a Layout UV command, and make sure you 
have shell and tile padding set to 10 units in the 
Layout UV Options. Figure 2.29 shows the UV of 
our pod after layout. Noticethat both UV sets 
have empty spaces. Maya sometimes does not 
do a good job using all the UV spaces. 
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s, wecan also 


manually pack our UVs. Grab all UVS of the 
and scalethe UVS up. Our UVs now exceed the 


pod, switch to Scaletool, hold down Dand X, 
and drag the pivot of the scaletool to the lower 
left comer of the UIV1 tile. Releasethe buttons 


Step 25: Manual Packing. Other than relying on 
Maya to layout the UVs for u 





Cree T asin ier fr Tit vegeta Meet tape, E 
a 


non 
_— 
et EE ES | eee 
e 
——— 


; @ S 
R See 
TE 
EF 

ii AE 
= HE 
mE 

HE 

è i 


DEET] 
a E A RULE LIGGA] 


TLU 


s 
sou & i 


AQF 230 MandlypaktheUé 


UI1V1 range. You want to control how much 

you are scaling, and the goal isto movethe UVS 
exceeding the UIV1 range back to the remaining 
empty UV space inside of the UIV1 space 

(Figure 2.30). 


Tips and Tricks 


The texel density of our manually tweaked UV layout is 
4.7617; the texel density before our tweak is 4.295, that is 
about 11% increase in resolution. We can always improve 
our texel density by manually adjusting the UV layout. 
However, it is going to be atime-consuming process. We 
need to keep popping out assets to meet the deadline, 
and sometimes this kind of optimization is not possible 
with the agenda of the production. 


Step 26: Finish all other UVs. Now it is your tum to 
f nish all other UVs. Please ensure that you have 
similar texa density and give every group of 
packed UVs a new material. Also, remember to 
namethe matenals with the resolution intended 
for these assets. 

Figures 2.31-2.56 aretheUVs and texa 

densities for the rest of the modas 

Step 27: Organization. Check your outliners and see 
if there is anything not named. Delete any empty 
groups; make sureall materials areassigned 
and appropnately named. When everything 
is checked, do a File->Optimized Scene Sizeto 
clean up redundant history and materials. 
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Conclusion 


The UV part of the model may not appear on the surface 
of the artwork. However, it is the foundation of the texture 
of the model and cannot be overlooked. There is an 
automatic UV command under UV->Automatic; it is wishful 
thinking that automatic UV can get you to a decent stage. 
Please don’t use it unless you have a good reason. Based 
on the previous experience of teaching UV, the author 
already regrets mentioning this command. The students 
always think automatic UVs are f ne - they are not. 


Once UVs are done, the fun task of texturing starts. Let’s 
jump into that in the next chapter. 











UV Mapping is generally the painful part or at least an 
annoying part of making 3D art. However, once we are 
done with it, we can now jump into texturing, which isa 
real joy with modem texturing tools. 


Texturing isthe process in which we def ne the color, 
roughness, metalness, height information, and other 
aspects of the surface of the model. All those aspects 
are images that can be mapped to the surface of the 
model with the UV we created. Textures are applied to 
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a material. The material will use the information on the 
texture to determine the lighting and shading behavior of 
the model. What is the color of the surface? Is the surface 
shiny? Is it a metal? All those play a signif cant role in how 
the model looks. 


Texturing is considered as important as the modeling 
part. There are many ways to do texturing. You can paint 
the texture in 2D with a UV snapshot or in 3D with some 
dedicated software. We primarily use a 3D painting 
software called Substance Painter. 


PBR 


In the modern workf ow, texturing has to def ne all 
aspects of a material, like the color, roughness, and 
metalness. In the game industry, we use a standard 
called PBR to def ne a material. PBR stands for Physically 
Based Rendering. It enforces the result of the rendering 
to be physically correct by limiting the number of inputs 
allowed to be adjusted. Other related material properties 
are calculated internally to ensure that the energy from 
the light is ref ected, refracted, and absorbed by the 
surface of the model based on the laws of physics. For 
example, if you know the color and roughness of a metal 
surface, you can already calculate the brightness and color 
of the ref ection using physics laws. There are variants 

of this standard, but the most popular one is called 
PBR-Metallic Roughness; it is composed of f ve surface 
attributes: 


Base Color 
Height 
Roughness 
Metallic 
Normal 


Height and Normal attributes are surface shape details. 
Strictly speaking, you don’t need any information in 
them to describe a material. However, some renderers 
still want to have them even they are only af at color for 
consistency. 





Baking 


Texturing often requires another process called baking. 
Baking is a process that generates textures that contain 
dif erent information about the geometry as follows: 


Normal Extract high-def nition detail in tangent space; the 
rendering process will use this map to calculate the 
lighting and make the high-def nition detail appear on 
the low-def nition model as an illusion. 











World Space Normal Extract normal coordinates relative to af xed frame in the 
object space. 

ID Identif cation map to quickly isolate areas on the model. 

Ambient Occlusion Becomes darker when the surface area Is closer to other 
surfaces. Used to enhance detail. 

Curvature Extract a map that contains convexity/concavity 
Information of the mesh. 

Position Extract the x, y, z world coordinates of all points at the 
surface of the mesh. 

Thickness Extract the thickness of the dif erent parts of the model. 





The ef ect of the maps can be more evident if we have 

a high-def nition mesh with some sculpted detail on it. 
You can add sculpting details to a model using sculpting 
software. Currently, the best sculpting software is ZBrush. 
Although ZBrush is a powerful piece of software, it’s 
beyond the scope of this book, so we won't be covering it. 
However, in the long term, if you plan to work in the game 
industry as a modeler, be sure you start working with this 
powerful piece of software. 


For now, let’s jump into texturing with Substance Painter 
where we will cover more essential aspects of texturing in 
the process. 


Tutorial 3.1: Texturing 
Modular Pieces 


Step 1: Set up a Maya project. Open our mode f le 
in Maya, go to File Project Window, inthe 
pop-up Project Window, dick on thenew button 
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at thetop row, and type in Game _ Maya _Project. 
Click on the Folder icon in the second row 

to def nea placeto saveour project, leave 
theres as default, and click on Accept. Press 

Ctrl +Shift +Sto save ourf le again, click on 
thescenes folder on the bottom left column of 
folders, and saveourf lethere. 


Why? 


So far, we have been modeling with Maya with one single 
f le. It is because model f les are relatively small, and 
managing them in one f leis tidy and straightforward. 
Another reason to have our models in onef leis due to the 
scale of our game being small enough. At some point, we 
have to have more f les for dif erent models, characters, 
and rigs. When we are creating more and more assets 
and f les, it is going to be harder and harder to trace stuf , 
so we need to have a way to manage our f les. Step 1 
creates a folder structure that contains subfolders for 

us to manage our f les; we wouldn't need most of them. 
However, since we are doing textures, the sourceimages 
folder it creates is where we put our texturing f le. 


Step 2: Arrange our mode's. We are going to 
texture multiple assets in onef leto help ensure 
consistency. However, to do that, we haveto 
movethen away to avoid overlapping modes. 
Select all the modular pieces of our models, 
and press Cini +1 to isolate them. Usethe Move 
tool to arrangethenso that similar pieces are 
put together but not overlapping each other 
(Figure 3.1). 

Step 3: Export models. Grab all the modular 
pieces, and go to File Export Sdection. In 
the pop-up Export Selection window, choose 
thesourceimages folder. Gick on the ydlow 
folder button at thetop left comer of the 
window to createa new folder, and rename it to 
set_texturing. Go to the bottom of the window, 
typein modular_piecesin thef le name, click the 
drop-down menu of the Files of type settings, 
and choose FBX export. Go to thenght sde 
of the window, and under the Options, check 
on the Smoothing Groups under the File Type 
Specif c Options Include Geometry section. 
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Click on the Export Section at the lower right 
comer of the window to export thef le. 


Why? 


What about the other models you may ask. Well, texturing 
f les are, unfortunately, super big, and the performance is 
Slow when there are so many models. We need to break 
our models into multiple texturing f les. 


Step 4: Import to Substance Painter. Open Substance 
Painter, and go to File New. Inthe pop-up 
New Project window, set the Template to Unreal 
Engine 4. You can change this later upon output. 
Click on the Select button, f nd and select the 
modular_piecesf lewe export in Step 3, and 
press the Open button. Changethe Document 
resolution to 2048, and press the OK button. 


Why? 


You may think, wait a minute, don’t we require some of 
the models to have 4096 x4096 (4k) textures? The answer 
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is yes, but 4k is a heavy texture resolution for computers 
to handle. One of the superpowers of Substance Painter is 
the ability to upscale the resolution at any stage without 
losing any detail. It achieves that by remembering every 
stroke you did while painting your texture and upgrade 
them to 4k. 


The Substance Painter Ul 


Substance Painter’s UI is somewhat like Maya. As shown 
in Figure 3.2, the area in the red box isthe menu where 
we load and change our models. The area in the yellow 
box is the Status Bar, which has generic controls like brush 
size, pressure sensitivity, symmetry, and perspective. The 
column of buttons in the purple box is the Tools bar. This 
bar has essential painting tools like paint, erase, project, 
and polygon f Il. The viewport is in the middle area inside 
the blue box. It has a 3D viewport and a 2D viewport 
almost identical to our Maya UV Editing layout. The 

Shelf is below the viewport in the cyan box. It contains 
brushes, alphas, grunge maps, materials, and other useful 
assets to help with texturing. Move to the right side. The 
brighter green box is the Texture Set List. You can see 
the names of the materials we created in Maya are listed 
here. Every material you created for the models in Maya 
ends up as a Texture set in the Texture Set List. You can 
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think of the Texture Set List as Maya's outliner. Substance 
Painter only cares about dif erent matenals and treat 
their associated models as dif erent objects. The darker 
green box is the Layers. This is the area we go to alot to 
stack multiple layers of textures together to get af nal 
look. In the orange box is the PROPERTIES panel, which 
contains brush or layer-specif c settings; things like tiling, 
channel toggles, alphas can be def ned here. Finally, on 
the far right in the white box, we have the UI Panel. The Ul 
panel lists all the panels that are not showing in the main 
Ul. Click on the various buttons to pull out other hidden 
panels like Display Settings and Shader Settings. 


Navigation 


The navigation of the 3D viewport is the same as Maya; 
the navigation of the 2D viewport is the same as Maya's 
UV editor. You can press F2 to show only the 3D viewport, 
press F3 to show only the 2D viewport, or press F1 to 
show both. 


Light Direction 


To change the direction of the light, hold down Shift, and 
click and drag the right mouse button. 


Step 5: Baking. Click on the TEXTURE SET SETTING 
tab on the left of the LAYERS tab. Find and click 
the Bake Mesh Maps button. In the Pop-up 
Baking window, set the Output Size under the 
Common parameters section to 4096, check 
on Use Low Poly Mesh as High Poly Mesh, and 
set the Antialiasing to Subsampling 8 x8. dick 
on the Bake all texture sets button. Substance 
Painter now starts baking, and it maytakea 
while. Weset the output size of the texture to 
4096 because it isthe highest resolution we 
are after. The User Low Poly Mesh as High Poly 
Mesh setting makes the baker bake all mesh 
data fromthe mesh we imported to the mesh 
itself; this way, rdevant mesh data like Curvature 
and Ambient Occlusion (AO) are generated. 
Antialiasing is crucial because it is going to 
reduce artifacts. It isalso going to increasethe 
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baking time. After baking, the moda looks 
sightly dif erent; its cavities or concave areas 
appear to bedarker. The darker color isthe result 
of the baked AO map, and it enhances the detail 
of the modal. 


Ambient Occlusion 


Ambient Occlusion is a natural phenomenon. It is caused 
by the concaved surface or faces close to each other 
sucking the lights in. Lesser light rays can bounce out from 
these areas, which causes these areas to be darker. This 
phenomenon is almost like an acoustic Sound-absorption 
Panel will do to sound. 


PBR Material Channels 


Go to the TEXTURE SET LIST and click on f oor_4k; this 
switches to the material of the f oors, and notice that the 
2D viewport switches to the UVs of the f oors. You can 

also hold down Alt +Shift together and click on any model 
of the f oor to switch to the f oor. Press Alt +Q to toggle 

on isolation (press Alt +Q again to toggle of ). Go to the 
LAYERS panel, click on the button with a tilted bucket icon, 
and you can see a new layer called Fill layer 1 got created 
above Layer 1. A f II layer is a layer that allows you to assign 
solid colors or textures to the model. Go to the PROPERTIES 
panel, and scroll down to the MATERIAL section. There 

are f ve buttons right under the MATERIAL section: color, 
height, rough, metal, and nm. These f ve buttons are the 
toggle of the channels we mentioned in the PBR section of 
this chapter. For every layer, you can click on the buttons to 
toggle the channels on or of , which adds or removes that 
channel's ef ect from the layer. 


The Base color def nes the color of the model. You can 
change it to any color you want to test it. 


The Height is how far the surface elevates. Height map is 
an illusion and is invisible unless there are some variations. 
Click on the Height uniform color button, in the search 
bar, and type in Metallic Grate wide; this should f Iter out 





others and only giving you the texture named Metallic 
Grate Wide. Click on Metallic Grate Wide to use it as our 
heightmap, and the patterns are now showing up on 
the surface of the model. We can assign textures like this 
to any channel we want. Change the direction of the 
light, and you can see how the height map reacts to the 
direction of the light, almost like there are actual height 
variations on the surface. If you zoom in and look at the 
model from a side angle, you can see that it is still af at 
surface. 


Roughness def nes how rough the surface is: a higher 
value makes it rougher, while a lower value makes it 
smoother. Go ahead and drag the roughness slider to see 
the dif erences. 


Metallic def nes the metalness of the surface. In the 
natural world, surfaces are either full metal or not metallic 
at all. However, sometimes when a metal surface is 
covered with dust, we can use a middle value. Go ahead 
and drag the Metallic attribute to see the dif erence. 


Normal map is like a height map but with more 
Information about the directionality of the surface shape 
variation. 


Right above the MATERIAL section, you can drag the 
Scale, Rotation, and Of set values to tweak the repetition, 
rotation, and of set of the applied textures. 


Step 6: Floor base material. Double click the name 
of the Fill layer 1 and typein Metal; this renames 
thelayer to Metal. Set the base color of the layer 
to a dark grey. Click on the Roughness uniform 
color, in the pop-up menu, type Leak Dirty in the 
search bar on top, and choosethef rst one called 
Grunge Leak Dirty. Set the Metallic valueto 1. 
We have just created a dark metal material with 
some vaniations on the roughness (Figure 3.3). 


Why? 


Notice that we only had variations on the roughness, and 
it can create f ne details already. It is always worth noting 
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that roughness should never be overlooked. It is, in some 
sense, as important as the color, if not more important. 


Step 7: Floor scratches. Create another f Il layer, 
name it Scratches, and set the Roughness value 
to 0.25 and Metallic to 1 Becausethis layer is 
abovethe Metal layer, it is blocking the Metal 
layer. We want this layer to only appear on the 
sharp edges. Right click on the layer and choose 
Add black mask (this adds a mask to the layer). 
Amask with black color means completely see- 
through or transparent; that is why we are now 
seeing the Metal layer again. Right click on the 
black mask, and choose Add generator. Go to the 
PROPERTIES panei, click the Generator button, 
and choose Mask Editor. We can now see how 
the edges of the model are showing our scratches 
layer (Figure 3.4). 


Generators 


Generators are an essential feature of Substance Painter. 
Generators generate colors based on the information and 
setting you give it. The most common usage of generators 
isto generate masks based on the baked mesh data to 
create things like edgewear or dust. We are going to cover 
more details of generators down the way. 
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Step 8: Tweak scratches. The Mask Editor isthe 


essence of the procedural texturing workf ow in 
Substance Painter; it is also the most commonly 
used generator. dick on the Mask Editor 

under the mask of the Scratch layer, and the 
PROPERTIES panel is now showing up all the 
settings it has. The settings may appear to be 
intimidating atf rst, but noticethat there are 
just two Sliders that are not 0: Global Balance 
and Curvature Opacity. Global balance is used 
to tune up or down theamount of opacity of the 
generated mask. Curvature is currently the only 
information used to generate the mask. Set the 
Global Balanceto 0.6 and the Global Contrast 
to 0.2 to make the edge wear look stronger and 
Slightly tighter. 


Step 9: Add variation to the mask. Right click on the 


mask of the Scratches layer and select Add f II. Go 
to the PROPERTIES pane, click on the grayscale 
button on the bottom, search and choose 
Grunge Scratches Fine. dick on the Norm button 
on thenght side of the Grunge Scratches Fine 
and choose Multiply. This setting is called the 
blending mode. Blending mode def nes how to 
blend the current layer to the layers below it. The 
default blending mode is Normal, which blocks 
everything undeneath. The Multiply blending 
mode multiplies the value of the current layer 
with the layer undeneath asthe result. This new 
layer adds subtle scratches to the mask, which 
makes it more detailed (Figure 3.5). 
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Tip and Tricks 


We have created a decent dark metal material without 
drawing a stroke; this is called procedural texturing. 
Procedural texturing has two main drivers: layering and 
masks. With procedural texturing, not only can we get 
faster and cleaner results but also able to tweak any 
step of the process without having to redo other parts. 
Procedural workf ow is also non-destructive because 
of that. 


Step 10: Create a Smart material. Hold down Shift, 
click on the metal layer and then the scratches 
layer, press Ctl +G to group them into a folder, 
and renamethe folder Dark Metal Scratched. 
You can dick on the folder icon to expand or 
collapsethe folder. Right dick on thefolder and 
Select Create smart material. A smart material 
is now added to the shaf with the same name 
asthefolder. You can see many other smart 
materials shipped with Substance Painter over 
there. A smart material isfundamentally a group 
or folder of layers. After creating our smart 
material, we can drag it fromthe shaf and add 
it anywhere we want. Delete our Dark Metal 
Scratched group in the LAYERS pane. Drag our 
Dark Metal Scratched smart material fromthe 
shaf above Layer 1 again. You can seethat it just 
created thesamething. 





Step 1: Top panas. Go to the SHELF, under the Smart 


materials section, look for Steel Painted Scraped 
Dirty, and drag itto thetop of our layer stack in 
the LAYERS pand. Open the ted Painted Scraped 
Dirty folder, and click on the layer named Paint 
to sdect it. In the PROPERTIES pana, click on the 
color bar under the Base Color, and a color pane 
pops out. Click and drag thethree vertical sliders 
on thenght to changethe hue, saturation, and 
value (brightness) of the color. You can also dick 
and drag anywherein the color-gradient box on 
the night to pick a color there. Changeits color to 
an orangecolor. This new material now covers 
almost all areas of our moda. 


Step 12: Paint height map. Createa new T II layer 


Why? 


above the layer named Base Metal. Rename 
thenew layer to OuterPand. In the PROPERTIES 
pane, toggleof all channeds except theheight 
channd. Drag the slider of the Haight setting 
upto 1 Givethislayer a black mask. Right click 
on the black mask, and select Add paint. Go to 
SHELF. Click on the Brushes section, and click 
Basic Hard to usethe Basic Hard brush. In the 
PROPERTIES panei, scroll down to the bottom 
and changethe grayscale of the brush to white. 
Hold down Cin +right mouse button, and drag 
left and right to changethe size of the brush. You 
can now try click and drag on the mode to paint 
extra haght (Figure 3.6). 


We created af II layer, make the value of its height 1, and 
use a mask to def ne where the height is. By doing so, we 
are now able to go back to the f II layer and change its 
height value to anything else. We could choose to create 
anew paint layer and def ne the height we want to paint 
in the brush settings, but then, it is harder to change the 
height value later. 


Tips and Tricks 


There are some basic shortcuts to tweak the brush. Hold 
down Ctrl +right mouse button, and go left and right to 
change the size of the brush. Hold down Ctrl +nght mouse 
button, and go up and down to change the softness of 
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the brush. Hold down Shift +left mouse button, and go 

up and down to rotate the brush. Hold down Shift Heft 
mouse button, and go left and right to change the opacity 
of the brush. 


Step 13: Usethe height as the mask of the outer 


Why? 


panel. Right click on the mask of the OuterPanel 
layer, and select Add anchor point. Scroll up 
and f nd thegroup called Steel Painted Scraped 
Dirty (this isthe group of the smart matenal 

we dragged in). Give the group a black mask. 
Right dick on the mask, and select Add fll. In the 
PROPERTIES pane, click on the grayscale button, 
and under the ANCHOR POINTS tab, select 
OuterPane Mask. What weshould see now is 
that the orange outer pane should only appear 
inthe area we painted the height (Figure 3.7). 


Anchor points are references of a texture. Our Outer Panel 
Mask anchor point is a reference of the result of the layers 
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under it and inside the mask of the OuterPanel layer. The 

f II layer we added to the mask of the Steel Painted Scraped 
Dirty folder is using that anchor point. So, it is referencing 
the same mask we painted for the OuterPanel layer. That is 
why where we paint white for the mask of the OuterPanel, 
we also see the Steel Painted Scraped Dirty appear. 


Step 14: Set up symmetry. Press the L button to 
toggle on symmetry (you can also f nd it in the 
Status Bar, see what's toggled on after you press 
the Lbutton). A Red plane shows up somewhere 
in the scene (you may haveto zoom out to seeit). 
Whatever you drew is going to be mirrored 
over to the other side of the plane. We want to 
draw the pattems symmetrically for the square 
f oor pieceon the right side. Press the Q button 
to toggleon the gizmo (blue handles to move 
the plane). Drag the blue arrowsto thenght to 
position the planeto the middle of the square 
f oor piece (Figure 3.8). 

Step 15: Paint Panels. Press F6 to switch to the 
Orthographic view (you can also f nd the switch 
at the nght side of the Status bar). The 
orthographic view has no perspective distortion, 
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which makes it perfect for painting precise 
Shapes. Press the number 2 button to switch to 
the Eraser (it is also at the Tools bar). Click and 
drag to erasethe painting we did earlier. Hold 
down Shift whilechanging the viewing angleto 
snapethe viewing angleto a straight top view. 
Movethe brush outside and below theshape of 
the Squaref oor pieceand left click. Hold down 
Ctrl +Shift and move the brush up. A dashed 
lineshows up from where we clicked to the 
current postion of the brush; it also snaps every 
5 degrees when you movethe brush. Make sure 
that thedashed line is vertical and covers the 
entiref oor piece and click again. A straight line 
isnow drawn across the dashed line. Keep doing 
this until we have covered a good portion of the 
f oor with a square pand (Figure 3.9). 





AGLRE 39 Davay eem wthoeism 





Tips and Tricks 


You may have to go up and down twice to draw a line all 
the way across. There are many ways we can f II a square. 
We use the Ctrl +Shift combination to help us draw 
straight lines. Once we have marked out the edge, how 
you f Il in the middle is all up to you. You can switch to a 
bigger brush to free draw it to f Il the gap. 


Step 16: Paint extra pana Detail. Using Ctrl +Shift 
combination, wecan quickly draw some extra 
detail to the pand (Figure 3.10). 


Tips and Tricks 


There is no way you can position the mirror plane at 

the center of the f oor accurately, but we can get close 
enough. We have to texture individual pieces in dif erent 
substance f les to have a perfect symmetry. However, it is 
hard to manage that way for our one-man-army approach, 
but if you have ateam, then it is better to have them work 
on their f les. 
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Step 17: Anchor as micro detail. Our pana looksf ne 
except that there is no edgewear (the scratches or 
other imperfections on the modal). In the Default 
settings, only baked height and normal maps 
are used for f nding edgewear. To include our 
painted height, go to the layer named Paint and 
click on its mask. Sdect mg_mask_builder. This 
mg_mask_build generates a mask that makes 
the edgeware appear on the edgeof the modd. 

It achieves that by using the baked normal 

and curvature maps. At the bottom of the 
PROPERTIES panei, click Micro Height and choose 
the anchor point we created for OutePand. The 
edgewear ef ect should now appear on the panel 
we painted (Figure 3.11). 

Steo 18: Use alphas. Go back to the Paint layer of 
the mask of the OuterPand by clicking on it. Go to 
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SHELF and click on the Alphas section. Typein 
Shape Gradient in the search bar, and choose 
thef rst onein thesearch result. Theshape of the 
brush isnow theshape of the Shape Gradient 
alpha. Pressthe X button to invert the color of our 
brush. In our case, it changes from whiteto black. 
Hold down the Qr +eft mouse button to go up 
or down to changethe onentation of our brush. 
Hold down Ctrl Hight mouse button to go left 
and right to changethesizeof the brush. To get 
accurate orientation, go to the Angle setting of 
the brush in the PROPERTIES pand, and hold 
down Shift while dragging the pin of the circular- 
Shaped dial to snap to a certain angle. With an 
angle of 180 and black color, we can paint a cool 
ramp on thesideof the pand (Figure 3.12). 


Step 19: Try other alphas. There are many other 


alphas; try them out and seeif you can create 
more breakups. Figure 3.13 shows the result of 
some new shapes added using alphas. 


Step 20: Normal Detailing. Gick on the button on the 


left of the button that weuseto createf Il layers 
to adda paint layer. Whilea f Il layer only allows 
usto usea solid color or a texture, a paint layer is 
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a layer wecan paint anything on. Namethenew 
paint layer NormalDetail. In the PROPERTIES pane, 
tum of all channesbut the nmm (normal) channe. 
Go to the Hard Surfaces section in the SHELF. Find 
Niche Rectangle Top Wide Rounded (you can 
search tof nd it or useother shapes if you don't like 
thisone). Drag it from HEF to the normal in the 
PROPERTIES pand. dick the X button on theAlpha 
of the brush to get nd of thealpha of the brush. We 
should now seethat thenormal shapeappears on 
the brush fully. You can now dick on the moda to 
stamp that shape (Figure 3.14). 


Tips and Tricks 


Through height map and normal maps, we can add a whole 
lot of surface detail to the model; that is why we do not 
have to mode! too complicated shapes in Chapter 1. It is 
crucial to design your workf ow with the tools at hand to 
determine the best way and best place to do certain things. 


Step 21: Edgewear for the normal map detail. Right 


click on the NormalDetail layer, and choose 
Add anchor point. Go to the mg_mask_builder 
under the mask of the layer named Paint. In the 
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PROPERTIES pand, click on the Micro Normal, 
and in the ANCHOR POINTS tab, choose our 
Normal Detail anchor point. Set the Referenced 
channel to Normal, and this ensures that weare 
getting the normal information instead of the 
base color. The edgewear should now appear on 
the panes we painted with normal map. Scroll 
up to the Micro Details section in the PROPERTIES 
panel. Set the curvature Intensity down to 0.15 
and Height Details Intensity to 10 to tighten up 
and sharpen our edgewear ef ect (Figure 3.15). 

Step 22: Add more normal pang details. Please go 
ahead and try to use other normal mapsin the 
Hard Surfaces section in the SHELF to add more 
detail to the moda (Figure 3.16). 

Step 23: Add cables. Create a new f Il layer, drag it 
down to reposttion it right above our Dark Metal 
Scratched group, and below our Steel Painted 
Scraped Dirty group. Renamethe new f Il layer 
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Cables. Set the Base Color of the layer to a darker 
gray, and set the Roughness to 0.2 and Metallic 
to 1, set the Height valueto 1 Givethe layer a 
black mask and add a paint layer to the mask. 
Go to the Brushes section of the SHELF and 
choose Basic soft. You can now usethe Qr +Shift 
button combination to draw straight lines to lay 
down some cables (Figure 3.17). 

Step 24: Fix height blend mode. Thereis a problen 
of our blend mode of the height, and the height 
map of the cable we painted out is showing on 
the orange pane. To f xthat, select Sted Painted 
Scraped Dirty, click on the drop-down list nght 
below the label of the LAYERS pang, and change 
it to Height. Weare now viewing and tweaking 
the height channel. Click the drop-down list 
on thenght sideof the Steel Painted Scraped 
Dirty layer, and change the setting to Normal. 
Theblending mode of the height channad of 
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this group is now normal, which blocks what 
ishappening under it, and our orange pane 
should now block the cables (Figure 3.18). 

Step 25: Extra layer of cables. dick on the number 
100 on thenght side of the paint layer of the 
mask of the Cables layer. Drag the Sider down 
to 30; this makes it only 30% visible, or in other 
words, makes it weaker. Add another paint to 
themask of Cables, and start drawing out new 
cables. The new cables should now beabovethe 
previous cables (Figure 3.19). 

Step 26: Cable holders. Select Cables and press 
Ctr +D to duplicateit. Renamethe duplication 
CableHolders and makeits Base Color slightly 
brighter and crank up the Roughness to 0.65. 
Right dick on the mask of CableHolders and 
choose dear mask, and this operation deletes the 
paint layers or other things in the mask. Add a 
new paint layer to the mask. Usethe Basic Hard 


À AN ~ J . £4 ‘¥ 
| RP NA-AN VIA & 
` N 


AN A w 
E AAMANNA 


ae ae 
) o eke Wie. 





AGRE 318 hadtdednacefed 


14 


wall_4k 


wall_frame_4k 


window_glass_4k 


window_Primary_4k 


00000 


window_tilt_2k 


LAYERS X TEXTURE SET SETTINGS 





PROPERTIES - PAINT 


AGRE 319 Biralae d cdeachk 


brush and paint somehonzontal bands to mimic 
the holder for these cables. Press the X button to 
switch to black color, and click on thetwo sides of 
the cable holders to add two holes (Figure 3.20). 
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Tips and Tricks 


We used a painted approach to get the cables, and it is 
fast and clean, but may not have the best shape. We could 
choose to model some cables instead, but it is going to be 
more cumbersome for the engine to handle. A dif erent 
way to achieve this is to bake a normal map from a model 
that has cables modeled. To save time and reduce the 
volume of this book, we choose to omit that workf ow. 





Step 27: Paint other panas. Using the same 
technique, we can create many details already. 
Go back to the various layers we added and 
painted, and paint pana and cable details for 
our other two f oor pieces. You do not need 
additional layers to do this. Figure 3.21 shows the 
result of thef nal design; the color of the pang 
was Slightly changed. 

Step 28: Limit the details to the top of thef oors. 
Select all the layers except the Dark Metal 
Scratched and press Ctrl +Gto group them. 
Namethenew group Detailing. Givethe group 
a black mask and add a paint layer to the mask. 
Press the number 4 button to switch to the 
Polygon Fill tool. The Polygon Fill tool allows us 
to sdect elements of the moda tof Il in colors. 
In the PROPERTIES panei, toggle on the square 
button of the Fill mode and set thecolorto 1. 
We can now click on any faceof the mode tof II 
that faceto white color, and keep clicking until 
the details we painted all reappear on thetop 
faces of thef oor pieces. By doing this step, we 
havelimited our painted details to the top faces. 
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We havealso got rid of the overshoot artifacts. 
Now, wehavea clean edge cut right at the edge 
of the top faces (Figure 3.22). 


Tips and Tricks 


The Polygon Fill tool is a clean way to def ne masks. There 
are four f Il modes: Triangles, Quads, Objects, and UV 
Shells, each represented by a triangle, a square, a cube, 
and a checker button. Switching to these modes allows 
you to click to f Il these dif erent elements with the color 
def ned by the Color setting. For example, if you choose 
UV shell mode, change the color to black, click on any 
part of the model, and it is going to f II the UV shell that 
contains that part of the model to black color. 


Step 29: Create a smart material. Select all the 
layers and press Girl +G to group them and call 
it GameScif Panels. Right click on the new group 
and select Create Smart Matenal. 

Step 30: Use the same material on the walls. 

Hold down Alt +Shift and click on any modal 
of the wallsto switch to the wall_ 4k texture 
set. Press Alt +Q to isolate it. Go to the Smart 
materials section of the SHELF, and search for 
our GameScif Panel. Drag GameScif Panels to 
thelayers. We should now seethe dark metal 
appears on the walls (Figure 3.23). 
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Why? 


So, where are the orange panels? The answer is that 

they have no proper mask yet, neither do the cables. 

All Substance Painter remembers is that we painted 
something in the area of the f oors, not on the walls; they 
are physically not at the same spot in the scene. Even if 
they were, the painting we did for the f oor would not 
work for the walls. We have to repaint them for our wall 
models. 


Step 31: Paint wall Panes. Go to the various layers 
and paint the pane's for our wall mode, and 
don't forget that you can press the X button to 
switch to black color to cut the panes out. Make 
surethat you also try dif erent alphas. We choose 
not to have cables on the walls, so wehid the 
layers of the cable. You can click on the eye- 
Shaped icon in front of the layers to toggletheir 
visibility (Figure 3.24). 

Step 32: Add extra panels to the walls. Add another 
f II layer on top of the OutePand. Nameit 
ExtraPand. Toggle of all the channels except 
the height channa, and set the height value 
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to L Adda black mask to thelayer, and adda 
paint layer to the mask. Switch to the Basic Hard 
brush. Hold down Ctrl +right mouse button, and 
drag down a littleto makethebrush softer. Start 
painting some extra pane'son top of the current 
panes (Figure 3.25). 

Step 33: Create edgewear for the extra panes. Right 
click on themask of the ExtraPand layer and 
select Add Anchor point. Go to the layer named 
Paint, right click on it, and add a generator. Click 
on the Generator button in the PROPERTIES 
pana, and choose Curvature. Cicktheof button 
after the Use Micro Details setting to toggle it 
to On. dick the Micro Height button, and under 
the ANCHOR POINTS tab, choose ExtraPane 
mask. We should now see orange colors appear 
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Why? 


only on the sharp ridges of the moda and the 
height of the extra panes we painted. Togglethe 
Global Invert setting On. Go to the bottom of 
the PROPERTIES pang. Click on the X button of 
the Curvature map to unload it, and then drag 
the slider under it down to 0. Now the edgewear 
should appear only on the extra panas we 
painted (Figure 3.26). 


We unloaded the curvature map because we do not want 
the baked curvature to af ect the mask. We only want 

the painted height of the extra panel to have edgewear. 
Given the proper Micro Height, the Curvature generator is 
perfect for generating edgeweer. 


Step 34: Fixthe blending mode of the Curvature 


layer. Noticethat the only place we see edgewear 
ison theextra pana we created earlier. The 

ef ect of the new Curvature layer is blocking the 
Mask Builder layer under it. To get the edgewear, 
weset up earlier back. Smply changethe 
blending mode of the Curvature layer to Multiply 
(Figure 3.27). 


Step 35: Cables base material. Switch to the cables. 


Go to the Materials section of the SHELF, f nd, 
and drag thelron Diamond Armor to the layers. 
In the PROPERTIES pane, drag theslider of the 
Scale setting all the way up to 128 to repeat 

the patten more. Inthe LAYERS pane, set the 
channel to Height and set the opacity of the 
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height channa of the Iron Diamond Armor layer 
to 30 (Figure 3.28). 


Why? 


You may argue that using an existing material shipped 
with Substance Painter is not a good idea. After all, other 
people may use it too. We are not using it as it is, and 

we can combine multiple materials and get something 
unique enough. 
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Step 36: Add another variant. Add another f II layer 
to thelayers, and name it straps. Changethe 
blend mode of its height channe to Normal. 
Make the Base Color darker, lower down the 
Roughness to 0.2, and crank up the Metallic 
up to 0.7. Go to the Procedurals section of the 
SHELF. Find and drag Stripsto the Haight input 
of thef II layer in the PROPERTIES pang. Set the 
Scaleto 16. It istoo strong, but trying to lower 
down the opacity not only makes it weaker but 
also reviews thelron Diamond Armor below 
it. Instead, nght click on the Straps layer, and 
saect Add levels. In the PROPERTIES pane, set 
theAf ected channel to Height. Drag the black 
pin at the bottom of thegraph to thenght; the 
more you drag it to thenght, the weaker the 
height becomes. Drag the black pin really close 
to thenght side, so the height is weak enough 
(Figure 3.29). 
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Levels 


Levels is atypical color-adjusting tool. The graph of the 
levels shows the color distribution of the color from black 
(left side) to white (right side). There are three Pins on 

top of the graph. The black pin represents the total black 
color of the spectrum. The gray pin represents the mid- 
tone, and the white pin represents the total white color. 
Dragging them around clamps and shifts the color of the 
image. For example, drag the black pin to the middle, 
and any color darker than the mid-tone before becomes 
total black. Drag the gray pin anywhere, and the color of 
that point before becomes mid-tone. The two pins at the 
bottom of the graph remap the color again. The color that 
the black pin is pointing at become black. The color that 
the white pin is pointing at becomes white. The color 
outside the two pins becomes pure black and white, 

and the rest of the color is interpolated between these 
two pins. 


Step 37: Create random mask for the Straps layer. 
Give the Straps layer a black mask. Right dick 
on the mask, and add a Generator; click on the 
Generator button under the PROPERTIES pang, 
and select UV Random color. Add a level above 
the UV Random Color, and drag the black and 
white pins at thetop of thelevel to the middle. 
This setup makes half of the cables show our 
Straps, and the other half shows our Iron 
Diamond Amor. If you don't likethe result, click 
on the UV Random Color and click the Random 
button of the Seed setting in the PROPERTIES 
pana to havea dif erent result (Figure 3.30). 


Why? 


First of all, the UV Random Color generates a random color 
for each UV island. The Levels then tighten the colors up 
to either black or white. This way, half of the cables have a 
mask of white, and the other half have black. 


Step 38: Add carbon f ber band layer. Drag the 


Carbon Fiber material fromthe Materials section 
of the shaf to thetop of thelayers, and change 
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its Scale setting to 128 to repeat the pattem 
more. Noticethat the Carbon f ber has no height 
channel. Wewant to make it higher than the 
rest of the cables. Add another f Il layer above it, 
toggleof all channds except the height channel 
of this new layer, name it CarbonFiberHeght, 
and set its height valueto 1 Select both 
CarbonFiberHeight and Carbon Fiber. Press 

Ctr +Gto group thenand namethe group 
CarbonFibeWithHeight. Changethe blending 
mode of CarbonFiberWithHeight to Normal. Give 
CarbonFibeWithHeight a black mask and adda 
paint layer to the mask. 


Step 39: Paint the mask of the carbon f ber. Press F3 to 


go to the 2D view. Switch to the Basic Hard brush. 
Inthe PROPERTIESpane, set the Alignment setting 
to UV. Usethe Qr +Shift button combination to 
draw a few straight lines across all the cables. 
Press F1 to see both the 3D and 2D views. We 
should now see bands get randomly placed on 
thecables. To make them morewvisible, dick onthe 
Carbon Fiber layer and set Color 1 and Color 2to 
darker colors (Figure 3.31). 


Step 40: Create material for the cable base and cable 


wrapper. For the cylindrical cable warper and the 
base, we can throw a Steel Gun Material atthe 
top of thelayer stack. Givethe Steel Gun Matte 
group a black mask, and add a paint layer to it. 
Switch to the Poly Fill tool. Don’t forget to change 
the color to whiteand changethef Il modeto 
Objects this time (the button with the cube icon). 
dick on thetwo modas to makethe material 
show up on them (Figure 3.32). 
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Step 41: Pipe Material. We can usethe tee Gun 
Painted also asthe material of the pipes. 
J ust switch to the pipes and drag the Steel 
Gun Painted smart material to the layers 
(Figure 3.33). 

Step 42: Glass Materials. Hold down Alt +Shift 
and click on one of the glass mode's to switch 
to the classes. Press Alt +Q to isolate them. 
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In the TEXTURE ST UST pang, click on the 
Main shader drop-down list on the right side 
of the window glass 4k texture set. Select 
Mew shader instance. The setting now shows 
as Main shader (Copy). Main shader (Copy) 

is a new shader. A shader is a collection of 
algorithms that calculate all the shading 
aspects of the 3D model. We need a new shader 
because the glass is fundamentally different— 
it has transparency. Click on the Sphere 

icon on the UI Pane to pull out the Shader 
Settings panel. Click on the PBR-metal-rough 
button, and change it to PBR-metal-rough- 
with-alpha-blending; this shader supports 
transparency. Change the Instance name to 
TransparentShader (Figure 3.34). 


Step 43: Add Opacity channel. Go to the TEXTURE 
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SET SETTINGS pane (on thenght sdeof the 
LAYERS pana). dick on the +button on the 
right of the Channels setting, and choose 
Opacity (Figure 3.35). An opacity channel 


Ww 


SHADER SETTINGS 


SHADER PARAMETERS 


Y Common Parameters 
AO Intensity 


enma 


OTAN AMOSAOSATTANTANAOS AONE 


Quality Low (16 spp) 


Horizon Fading 


a S 


A ri 
New shader instance Emissive Intensity 


9 


Y Parallax Occlusion Mapping 
Enable 
Strenath 





LAYERS TEXTURE SET SETTINGS x 


Size | 2048 


Channels 


Normal mixing 

Ambient ocdusion mixing 
UV padding 

Mesh maps 


PROPERTIES - PAINT 


G ® [e] @ 


Vv 


a 


3D Space Neighbor 


Bake 





AGRE 335 AtitheQuitycerd. 


oo 


Ambient occlusion 
Anisotropy angle 
Anisotropy level 
Blending mask 
Diffuse 
Displacement 
Emissive 
Glossiness 


lor 


etlection 
Scattering 
Specular 
Specular level 
Transmissive 
Usero 
User] 
User2 
User3 
User4 
User5 
User6 


User? 


is needed to feed opacity valueto our 
TransparentShader. 
Step 44: Create Glass Material. Go to the LAYERS 
panel and add a new fill layer. Name the new 
layer Glass. Under the MATERIAL section of 
the PROPERTIES panel, you can now seean 
extra channel called op. The op channel isthe 
Opacity channel we added in Step 43. Set the 
Base Color of the fill layer to a mid-gray. Click 
on the Roughness button, search, and use 
Grunge Fingerprints Smeared as the Roughness 
input. Set the Opacity setting to 0.1 to make 
it more transparent. Glasses are generally 
no-metallic, so keep the Metallic setting O 
(Figure 3.36). 
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We don't have too much stuf happening on this glass 
material. The shader of the game engine is going to be 
very dif erent on stuf like transparency. We are going 
to def ne these attributes in the game engine when we 
create these materials. 


Step 45: Create materials for all other modular 
pieces. We have covered enough techniques. It is 
now timefor you tof nish all the other materials. 
Figure 3.37 shows our result for the modular 
pieces, and Figure 3.38 shows a close-up shot of 
thetextures of the stairs. 
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Assignment: Texturing 
the Rest of the Models 


The way we texture the props and the hero asset 

is the same way we texture our modular piece. 

Figures 3.39-3.44 show the result of the textures we did. 
The only new thing here is that for the screens, we added 
an Emissive channel to the shader to allow emissive input 
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to make the screen a bright blue color. We end up with 
f ve substance f les: 


Modular _pieces_texturing.sop (Contains all of our 
modular pieces.) 

Props _texturing.sop. (Contains all the prop meshes 
that are not supposed to movein the game.) 

Securty camera_texturing.sop (Contains only the 
security camera.) 

Door_texturing.sop (Contains only the door.) 

Hero_asset_texturing (Contains only the hero asset.) 


There is no particular reason why we separate the camera, 
the door, and the hero asset other than some organization 
f aws we had during the production. You can have a 
completely dif erent distribution. Please go ahead and 
have some fun texturing the rest of the models. 


Conclusion 


Texturing takes time, but it is more fun to do. However, 
it is not satisfying until we have our scene constructed. 
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We are now eager to move ahead and put our models to 
the game engine, set up the materials, and assemble our 
model to our impressive level. 


In the next chapter, we are going to focus on importing 
and assembling our level in the game engine. 








In this chapter, we are going to study the basics of Unreal 
Engine, create our game project, as well as importing 
assets, and create our materials. You may think that 
importing is just a click and drag operation, and it could 
be true in some scenarios. However, the nature of our 
modular workf ow does need us to pay more attention to 
organization and consistency. 


Keep in mind, though, whatever you do in this chapter 
cannot compensate for the f aws in your model. Please 
make sure that you check your models before moving on. 
We also have the f les ready for you if you wish to move 
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on with the models and textures we created. Also, it is not 
rare that we sometimes create new asset down the way 

if we think we need more. Making a game is not linear by 
nature. A professional team is going to have the modelers 
doing the models, while the animators are creating 
animations and the programmers implementing game 
mechanics. There are always discussions and decisions 
going on between teams or departments and f les going 
back and forth. 


Game Engines 


Game engines are software built to make games. They 
have already built frameworks or modules for rendering 
Inputs, physics, Al, Networking, UI, VFX, and Audio. 
Game engines usually have an editor to build level and 
other content. They often support a set of programming 
languages for programmers to create game logic. 


Unreal Engine 


Unreal Engine 4 is going to be our engine of choice; it 

is among one of thef rst and best game engines. It is 
behind many of your favorite game titles: Fortnite, the 
Gears of War series, the Bioshock series, Player Unknown’s 
Battlegrounds, Final Fantasy 7 remake, and the list goes 
on. As a game studio that keeps producing games of their 
own games, Epic Games always push the professionalism 
of Unreal Engine to the extreme. Unreal has a framework 
with feature-rich modules on all aspects of game 
production. Unreal of ers an artist-friendly experience for 
content creators and gives professional programmers full 
access to its C++source code. 


Tutorial 4.1: Get Unreal Engine 4 
and Visual Studio Up and Running 


Step 1: Download and Install Epic Game Launcher. 
It takes minimal ef ort to get Unreal Engine 
downloaded. Open your web browser 
and vist https://www.unrealengine.cony. 


Click on the blue DOWNLOAD button on the 
upper right comer. Click the Select button 
under Publishing Licenseto get the installer 
downloaded (you may haveto register for 

an account to get to the download). The 

web page may have changed by thetime 

you read this book, so pleasef nd your own 
way to the download link if it is not the same 
as we described. After downloading, open 

the downloaded Epicinstaller to install Epic 
Game Launcher. 

Step 2: Install the Unreal Engine. Open Epic Game 
Launcher and log in. Click the Unreal Engine 
on thelist of sections on the left side column 
of the UI. Gick on the Library tab up top. Press 
the yellow +sign after the ENGINE VERSIONS 
to add a new version. At thetime we writethis 
book, the engine version is 4.24.3. The version 
of Unreal Engine evolves super fast, so expect to 
see a much higher version on yours. Click on the 
Install button to install the engine. It is going 
to take a long timeto install, so be patient 
(Figure 4.2). 


UNREAL ENGINE 


Unreal Engine 


nding on how you intend to use Unreal Engine, you can choose from a number oflicensing 2puons 


License options 


Publishing License Creators License 
GET STARTED FOR FREE, PAY 5% WHEN YOUR PRODUCT SUCCEEDS FREE TO USE & 100% ROYALTY-FREE 
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Visual Studio 


Visual Studio is an Integrated Development Environment 
(IDE) for programming, or in plain text, it is a fancy text 
editor in which we write our code. IDE has extra features 
like debugging and Intellisense. We are going to need 
Visual Studio at some point when we are building the 
game. It is better to have it ready when we start our 
Unreal Engine project. 


Step 3: Install Visual Studio. Visit https://visualstudio. 
microsoft.conyvs/community/ and click on 
the purple Download Visual Studio button to 
download the installer. Run the installer and 
follow the steps until you got to a dialog box like 
Figure 4.3. 

All you haveto do hereisto check on 
Game development with C+: And press the 
Install button at the bottom nght comer. The 
installation is also going to takea long time. 

Pleasedo not move on until Unreal 
Engine and Visual Studio are both installed. 

Step 4: Create your Unreal game project. dick the 
yellow Launch button at thetop right comer 
of the Epic Game Launcher to launch Unreal 
Engine. After loading, in the f oating Unreal 
Project Brower, choose Games under the New 
Project Categories section and press the green 
next button. Select the First Person template 
because we are doing an FPS game. For anyone 
who wants to do a third person, please choose 
the Third Person Template. The coding later 
should be mostly the same. Pressthe Next 
button. dick on the With Starter Content and 
change it to No Starter Content. At the bottom, 
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click the button with the ellipsis and choosea 
folder to create our project. Tyoethename you 
want for the project. TheEscaper isthe chosen 
namefor our game, but you can go for anything 
else you like. dick the Create Project button to 

f nish (Figure 4.4). 


UI of the Unreal Editor 


Unreal now start to create the project for us; when it 

f nished the setup, the Unreal Editor will show up. The Ul 
of the Unreal Editor is similar to that of Substance Painter. 
On the very top row, we have the Menu, where you can 
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f nd common commands like save the level, showing 

UI elements, and preferences. As marked in Figure 4.5, 
the panel in the red box is the Modes panel. The Modes 
panel contains universal engine assets like lights, player 
start, primitive models, terrain, and various volumes. You 
can also f nd tools for editing terrain, vertex painting 

in the Modes panel. The Yellow box is the viewport; it 
shows our current level. The panel in the cyan box is the 
Content Browser; all assets we created or imported for our 
game are in here. The panel in the blue box is the World 
Outliner; this one is the same as the Outliner of Maya; all 
objects we put in the level are in this list. The panel in the 
orange box is the Details panel. The Details panel shows 
the settings for any objects we are selecting. Notice that 
there is another tab on the night side of the Details panel 
called World Settings. The World Settings panel shows 
settings associated with the current opening level. 


Navigation 


To Navigate the viewport, hold down the nght mouse 
button and then use the W, A, S, D buttons to move 
around. Hold down the right mouse button and move 
the mouse to look around. Alternatively, you can also 





hold the Alt key down and Left, Middle, and Right-mouse 
drag similar to Maya (although the middle mouse drag Is 
inverted to Maya’s). 


Steo 5: Test run the game. To Test run our game 
in the editor, just press the Play button in the 
Toolbar. Thetemplate has an FPS character in the 
level holding a gun. Weare now possessing (or 
controlling) this character. You can usethetypical 
W, A, S, D buttons to movearound theleve, left 
click to shoot and space button to jump. 

Step 6: Test build the game. Press the Esc button to 
get out of play mode. Go click on File Package 
Project > Windows Windows (64 bit). In the 
pop-up Package project window, navigate to 
thefolder you choose for the project. Create a 
new folder there and nameit Publish. Double 
click the Publish folder and click the Select Folder 
button. UE4 makes a high-pitch sci-f sound, 
and a packaging notif cation appears at the 
bottom right comer. Give it a few moments until 
it says: Packaging complete. Open the publish 
folder, and you can seea folder with the name 
WindowsNo&ditor; this isthe game we have 
packaged. Open this folder and double dick 
Theéscaper.exe to run our game. 


So far, the game has no Ul at all. We are just a robot 
holding agun and shooting yellow balls. However, it is 
pretty exciting to have something built and working. Press 
the ` button (the button below the Esc button) to pull out 
the console and type in exit to quit the game. 


Let’s move on to get our asset into Unreal Engine. 


Tutorial 4.2: Export Our Assets to 
Unreal and Build Our Material 


Step 1: Prepare our mode's. Open our Maya f lethat 
contains all our models. If you areusing thef le 
we provided, it is called Set_ Modedl.mb. This 
f leis also thef leweused to export our modal 
to Sulostance Painter. It has all our modes. 
Figure 4.6 shows the Outliner of thisf le. 

We havealso moved our models away 
from each other for texturing. It is now 
thetimeto movethen back to theongin. 
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Select the All group in the Outliner. Go to 
the main menu and do a Sect > Hierarchy 
command. All modas are now in our 
section, go to the Chand Box, and set the 
Translate and Rotate values to 0 and Scale 
values to L All the models should now back 
to the ongin (Figure 4. 7). If some ofthemnare 
still not back to the ongin, select them, and 
do a Modify > BakePivot. Zero out their 
translation and Rotation again. 


Step 2: Export our modas. We are going to try to 


organize our f les systematically. Instead of 
exporting all the modas together as onef le, we 
aregoing to export every group separately. We 
plan to createa folder in Unreal Engine for each 
group we havein Maya. Sdect thef oors group. 
Goto File Export Selection. In the pop-up 
Export Sdection window, navigateto thefolder 
that we created for our game project. Createa 
new folder called Assets and createa f oors folder 
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M Export Selection 


Inside of it. Set the Files of tyoeto FBX export. 
Under the Options listed on the nght sdeof the 
window, Open the Geometry section. Make sure 
that the Smoothing Groups and Tnangulate are 
on and others areof . Ifthe Animation ison, check 
if itisof too. Typeinf oorsfor thef lenameand 
hit the Export Selection button (Figure 4.8). 


144 14 ECEE D Di PI >>I 


~ oios 


m 








i Catin @meswth Urad Engine Suostane Parte, &Maa 


Step 3: Export all other modas. Using the same 
method in Step 2, we can export all other modas 
(Figure 4.9). Noticethat we do not separate the 
Props and modular_pieces. 

Step 4: Export Textures. Open our modular_pieces_ 
texturing.sop f le with Substance Painter. Hold 
down Alt +Shift and click on any part of thef oor 
mode to select thef oor texture set. Go to File 
Export Textures. In the pop-up Export document 
window, click on thelong button that shows a 
directory right below the labe of the Export tab. 
Af leexplorer pops out for you to choosea place 
to export thetextures. Navigateto thef oors 
folder we created for exporting our f oor modal. 
Set the texture format from png to targa. Set the 
Conf g to Unreal Engine 4 (Packed). In the Texture 
sets list, check of everything but f oor 4k. 
Because we demand it to usea 4k texture, set the 
resolution on thenght Sdeof thefoor 4k texture 
to 4096 x4096. Uncheck the Export shaders 
parameters at the lower right comer. Pressthe 
export button to export the textures (Figure 4.10). 

Step 5: Export the textures for the rest of the modes. 
Pleasespend sometimeto export all other 
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EXPORT CONFIGURATION 
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Why? 


textures. Beawarethat some of the models may 
have multiple texture sets, likethe moda of the 
hero asset. Put these textures to the hero folder 
altogether. 


We spend a lot of time trying to organize our f les. It 

may seem redundant to do all these folders and naming 
everything, but it is going to make our life much easier 
later on. Imagine that you need to tweak the model of the 
f oors. You do not want to have to re-export everything 
again. It is also easier to delete the f oors by just deleting 
the f oor folder. 


Step 6: Import thef oor to Unreal Engine. Go to our 


Unreal Editor. Right click on the Content folder 

in the content browser and select New Folder. 
Type StaticMeshes to renamethe new folder 

to StaticMeshes. Double click to go insidethe 
folder. Open a windowsf le browser and f nd our 
Assets folder that has all our folders of meshes 
and textures. Drag thef oor folder from our f le 





i CGeatingGrreswithUred Engine Suostene Parte, &Maa 


BAddNew~ import MSaveAll é 


Peg Search) Paths OPH RRALLE Search floors 
4 
' 


ARAE 42 Inpotedfooasds 


144 





browser to the content browser of Unreal Engine 
(Figure 4.11). 

Unreal pulls out the FBX import Options. 
We just need to usethe default settings for 
our static meshes and press the Import All 
button to import all the assets. Wenow 
got our f oor mode's with a material called 
f oor_4k and three textures imported. Notice 
that unreal also created a f oor folder for us 
because we dragged in a folder (Figure 4.12). 
Press Ctl +A to select themall and press 
Ctr +Sto savethem. 


Manage Assets 
me Share View Picture Tools 


> ThisPC > Stark (:) > GamePrjs > Assets 








Tips and Tricks 


When an asset is imported to Unreal Engine, they are 
categorized into dif erent types. The narrow color bar 

at the bottom of each asset shows their type. The assets 
with cyan color are static meshes. A mesh is the same as a 
polygon in our context. Static meshes are meshes without 
the ability to deform (or change shape). If you go to the 
Content > Character Mesh folder, you can see af le 
with a pink bar called SK_ Mannequin_ Arms, and this asset 
is a skeletal mesh. A skeletal mesh has a skeleton under 

it that can control its movement, almost like how real-life 
creatures have bones. The process of setting up skeletons 
for a mesh is called rigging. We are going to cover rigging 
later when we are making our own player and NPC 
characters. Back to the f oor folder, the one with the green 
bar named f oor 4k isthe Material of the f oors. The other 
three are textures. Textures have a red bar. 


The Material Editor 


Double click the f oor 4k Material to pull out the Material 
Editor. The Material Editor is where we can construct our 
materials. Hold down the right mouse button and drag 

to move around the graph. There are two Squares in the 
graph, and they might be overlapping each other; you can 
use the left mouse button to drag them away from each 
other. Each node contains either some data or do some 
operations. 


Thef oor 4k node isthe f nal output of the Material; it has 
similar attributes we see in Substance Painter like Base 
Color, Metallic, Roughness, and Normal. The Param node 
is a color node, and it contains a solid color. The dots on 
the left side of anode are its input pins, and the dots on 
the right side of anode are its output pins. There is a line 
connecting from the white output pin of the Param node 
to the Base color input pin of the f oor_4k node. Lines like 
this are called connections. This particular connection 
means that the color of the Param node is passing to the 
Base Color of the Material. There is a Details panel at the 
lower-left comer of the Material Editor. Select the Param 
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node, and the settings of this node appear in the Details 
panel (Don’t confuse this Details pane! with the Details 
panel of the main UI). Double click the gray bar of the 
Default Value setting in the Details panel to pull out the 
color wheel. Click and drag on the color wheel to select 
any color and press ok. The Matenal now should appear to 
be in the color we have picked (Figure 4.13). 


Color R, G, B, A Channels 


There are more output pins on the left side of the Param 
node. The red, green, and blue pins are the red, blue, 
and green channels of the node. Any color on a screen 

is a specif c combination of red, green, and blue colors; 
combine them in dif erent proportions, and you get a 
dif erent color. The red pin outputs how much red color 
is used to create this color. The white pin at the very 
bottom is the alpha channel, a fancy name for a channel 
that represents the transparency of the color. These four 
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channels are known as R, G, B, A channels of color. You 
can also adjust them numerically below the Default Value 
in the Details panel. These values are ranging from Oto 1. 
The value of the A channel is 0, which means that it is not 
transparent at all. 


Step 7: Set up the OcclusonRoughnessMetallic 
textures. Double click on thetexture with 
OcclusionRoughnessMetallic at the end of its 
nameto open the Texture Editor. Un-check the 
SRGB under the Texture section in the Details 
panel and press Gini +Sto save it (Figure 4.14). 


Why? 


The sRGB setting is on for all textures that represent a 
color. What sRGB does is remapping the color to make 
it more suitable for our monitor; however, it does alter 
the original information. The reason we checked of the 
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SRGB of the OcclusionRoughnessMetallic texture is that it 
does not represent a color. The R channel represents the 
Ambient Occlusion, G channel represents Roughness, and 
the B channel represents Metallic. Applying sRGB to these 
channels alters the Ambient Occlusion, Roughness, and 
Metallic values, which is not what we want. 


Step 8: Set up the Material. Go back to thef oor 4k. 
Hold down Shift and select all three textures 
we imported in the Content Browser and drag 
themto the Material Editor. The Material Editor 
creates three Texture Sample nodes to read the 
threetextures. Drag then away fromeach other, 
so they are not overlapping. Click and drag the 
RGB output pin of the Texture Sample that reads 
our base color textureto the Base Color input pin 
of thef oor_4k node. The color should appear 
on the ball insideof the vewport at the upper 
left comer of the Matenal Editor. The Texture 
Sample nodethat reads the bluetexture reads 
our normal map, drag its RGB output pin, and 
connect it to the Normal input pin of thef oor 4k 
node. The last Texture Sample node is reading 
the OcclusonRoughnessMetallic texture. Drag 
Its R, G, B, output pins to the Ambient Occlusion, 
Roughness, and Metallic input pin of the 4k node 
(Figure 4.15). Press the Save button on the upper 
left comer of the Material Editor to save our 
changes. 


Close the Material Editor. We can see all of our models 
now updated with textures. If they are not showing the 
correct textures, select them all and right click on them to 
force an update. Drag the f oors f oor 01 to the viewport. 
Press the F button to focus on it. Press the W button to 
invoke the Move Tool and drag it up so we can see it 
(Figure 4.16). 


Tips and Tricks 


The Move, Rotate, and Scale tools have the same shortcut 
as Maya. They work the same way as Maya also. 


Step 9: Createthe master material instance. Right 
click on the StaticMeshes folder and select New 
Folder. Namethe new folder Shared. Go back 


File Edit Asset Window Help 


TO gA 3 


Save Browse Apply Search Home CleanUp Conme 


(Pewee) (Guts) 


so O So p tl) T. 
LVEPTEI E 


LiveNodes LiveUpdate Hide Unrelated šate Platform Stats Preview Nodes 


CGE 


RGB @ 
R 


4 Substance_Base_Mtl 
» Base Color 
> Metallic 
» Specular 
» Roughness 


» Emissive Color 
Apply View MipBias 


» Normal 


» World Position Offset 


~ AO_R ughness_Metalic 
Para 


UV RGB © 


Ap oly View MipBias R » Ambient Occlusion 


> Pixel Depth Offset 
@. Details @) Parameter Default: RGBA © 


search verais ON Ra 


4 Physical Material 


Phys Material 


4 Material 
Material Domain 
Blend Mode 


Decal Blend Mode 


floor 4k modular_Pieces_all_floor4k_ modular_Pieces_all_floor4k_ modular_Pieces_all_floor_4k_ 


AGRE 415 TrearettasioorlVeaid. 





to thef oorsfolder, sdectf oor 4k, and press F2 
to renameit to Substance Base Mtl. Drag the 
Substance Base Mtl to the Shared folder and 
select Move Here. Double dick on the Shared 
folder and you can see our Substance Base Mtl 
located in it. Right dick on Substance Base Mtl, 
select Create Material Instance, and press the 
Enter button to commit the default name. You 
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are probably wondering what wearedoing here. 
Keep following the steps, and you will seethe 
reasons later (Figure 4.17). 


Material Instance 


Material Instances can be used just like materials. Material 
Instance does not need recompilation when you make 





changes. Material Instance has only settings you exposed 
through parameters in the parent material (we are going 
to cover how to do this part later). 


Step 10: Create a material instance for thef oors. 
Right dick onthe Substance Base Mtl_Instand 
select Create Material Instance. Namethenew 
material instancef oor_4k, drag it to thef oor 
folder, and select Move Here. Open all thef oor 
modas and set their Henent 0 material under 
the Matenal Sots section in the Details panel 
to our new f oor 4k. You can drag thef oor 4k 
Material fromthe content browser to the Bement 
Odot of the mode's asset editor to assign it 
(Figure 4.18). 
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Step 11: Convert texture samples to parameters. 


Why? 


Go back to the shared folder and double click 
to open the Substance _Base_ Mtl. Right click on 
the Texture Sample for our base color and select 
Convert to Parameter. Change the Parameter 
Nameunder the General section of the Details 
panel to Base Color. Do thesamething for the 
other two Texture Samples, and namethe one 
that reads our normal map Normal and the 
other oneAO_Roughness_Metallic. Open our 

f oor 4k material instance again. Thethree 
parameters have now appeared as grayed out 
texture slots. You can click on the checker box 
in front of these texture parameters to toggle 
themon. You can now changethe base color to 
something ese and see it update to the modas 
right away (Figure 4.19). 


The reason we chose to use material instances is to avoid 
having to set up the same thing again and again for 
dif erent models. Because they all use three textures, 





we can easily create new material instances for all other 
models and only change the three texture parameters. 


Step 12: Import other mode's. Press Cin +Za few 
times until the Base _Color of thef oor 4k 
material instance is checked of . Doubleclick on 
the StaticMeshes folder in the Content Browser to 
get inside of it. Open a Windows f le explorer and 
go to our Assets folder again. Thistime, select 
all the folders except our f oor folder (we got 
them imported already). Drag all these folders to 
the content browser with onego. In the pop-up 
FBX Import Options, set the Material Import 
Method under the Materials Section to Create 
New Instanced Materials. Click on the drop- 
down of the Base Material Name setting and 
select Substance Base Mtl_Inst. Press Import 
all to import the rest of the mode's and textures 
(Figure 4.20). Unreal gives usthe same folder 
structure. 

Step 13: Fix SRGB settings for the 
OcclusionRoughnessMetallic textures. Click 
on the SaticMeshes folder, under thef Iters 
of the Content Browser, and search for 
OcclusionRoughnessMetallic. All textures that 
have OcclusionRoughnessMetallic in their name 
are now listed. Hold down Shift and click on the 
f rst one, and then thelast oneto sdect themall. 
Right click on any one of them and select Asset 
Actions Bulk Edit via Property Matrix. In the 
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pop-up asset editor, hold down Shift and select 
everything in thelist, and check of their sRGB 
setting (Figure 4.21). 


Tips and Tricks 


At any time, if you want to change settings of multiple 
assets, you can do it using the Bulk Edit via Property 
Matrix command. 
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Step 14: Assign correct textures for other mode's. Go 
to any of the new folders added to the Content 
Browser. We can now seethe modes, textures, 
and material instances that have Substance _ 
Base Mtl Inst astheir parent. Double click 
to open these material instances, check on 
all three texture parameters, and assign their 
corresponding textures (Figure 4.22). Go ahead 
and f nish assigning all thetextures to all the 
material instances. After assigning the textures, 
press the Save All button on thetop row of the 
Content Browser to save out all of our mode's 
and drag a few modesto the viewport to takea 
look (Figure 4.23). 


Why? 


You are probably trying to get your head around on 

this Material, matenal instance mix. First of all, it is not 
necessarily to be the only way. You could just create new 
materials for every model. But there are ments of doing it 
using instances. First of all, as you can already tell, material 
instances are faster. Second, this hierarchy can help us 

to make global changes. Figure 4.24 shows the hierarchy 
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Actual materials used by the models 
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of the materials and material instances we have created. 
There is a base material called Substance Base Mtl. 
Substance Base Mtl def nes how textures are connecting 
to the channel of the Material. We created a material 
instance of the Substance Base Mtl called Substance __ 
Base_Mtl_Inst. Every other materials we use on the 
models are instances of this Substance_Base_Mtl_ Inst. We 
need the Substance Base _Mtl_ Inst to help us to do global 
tweaks if needed. For example, if all the models appear to 
be too shiny, we could tweak the Substance Base Mtl_ 
Inst to make them all rougher with one go. You are going 
to see how to set up controls for roughness and many 
other attributes of the material instances later. 





Now we have all of our assets imported and materials 
created. We can move on to build our level already. 

But before we rush forward, let’s build a testing hallway 
and see how our materials behave with lighting and tweak 
them if needed. 


Tutorial 4.3: Set up a Test Hallway 


Step 1: Create a new Level. Create a new folder under 
the Content folder of the Content Browser and 
name it Level. Go to File New Leva. Inthe 
pop-up New Level window, select Default. Wedo 
not need to savethe current template level, so 
press Don't save. Oncethe new level is loaded, 
press Gin +S and save it in our Leva folder and 
nameit Test_ Level. 

Step 2: Set up snapping. Go to Edit > Editor 
Preferences. Click on the viewports section on 
thelist on the left side of the Editor Preferences 
window. Under the Gnd Snapping section in the 
right side of the window, check on Use Power of 
Two Snap Size (Figure 4.25). 


Why? 


We have built the entire sizes of our assets based on the 
binary system. Their sizes are all power of two sizes. We 
switch on Use Power of Two Snap Size so our model can 
snap together nicely. 
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Step 3: Set snap sizes. On the top right comer of 
the viewport, there is a row of viewport quick 
settings. Click on thenumber 4.on thenght side 
of thegnd icon and choose 16. Thenumber 16 
means wearesnapping every 16 unity when we 
are moving things around. We chose 16 because 
this number isthe smallest 9ze of our modular 
mode's (Figure 4.26). 

Step 4: Build a simple hallway f oor segment. Delete 
thef oor moda in the level. Go to thef oors folder 
in the Content Browser. Drag f oors f oor O1to 
the level. In the Details pana, set the Locations 
X, Y, and Zto Oto move it to the ongin. Press W 
to go to the Movetool. Hold down Alt and drag 
thef oor moda on the X direction (the red arrow). 
Acopy of thef oor got created and moved out. 
Keep dragging until its edgealigns with the 
original one (Figure 4.27). 

Step 5: Add two more half f oors on the side. Drag 
thef oors f oor 02 totheviewport and movethe 
cursor close to the already existing f oor pieces 
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so it can be placed doseto then. Movethenew 
half-sized f oor piece until it snaps to the ade of 
oneof the squaref oor pieces. Hold down Alt and 
drag it to the other side. Rotate it 180 degrees 
(the rotating tool has a 10-degree snapping 
default setup) and move it again until it snaps 
(Figure 4.28). 

Step 6: Build the walls. Go to the walls folder and 
drag walls wall 03 on top of thef oorson the 
side. Rotate and moveit, so it naps to the side of 
thef oor. Hold down Alt and drag to havea copy 
and snap it to theother side (Figure 4.29). 
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Step 7: Duplicate thef oors and walls. Hold down 
Shift and select all the modas we dragged 
in. Hold down Alt and drag to havea copy 
of them and snap them until we got another 
section snapped perfectly to the onginal one 
(Figure 4.30). 

Step 8: Add wall frames. Drag the walls _wall_ 
frame _02 to thelevel. Snap it so it is aligned to 
the outer edge of the width of the hallway and 
half embedded in the wall. Drag a copy and align 
it to the other side (Figure 4.31). 
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Why? 


Why do we embed the wall frame only halfway? Well, 
when we duplicated it, the other half is going to be 
embedded in the duplicated walls. 


Step 9: Add a few pipes. Drag a few pipes and pipe 
parts to the concave areas of the walls. This 
part isf exible, and you can create something 
completely dif erent (Figure 4.32). 

Step 10: Add ceiling. Select all thef oor pieces. Hold 
down Alt and drag them up until the copies 
Snap to thetop of the walls. Wedid not create 
ceiling pieces, so thesef oors also haveto be 
our ceilings. Fortunately, their bottomis using a 
dif erent material so that they do look dif erent 
(Figure 4.33). 

Step 11: Select all pieces and Group them. Go to the 
World Outliner, and click on the Type button to 
sort the assets in the level by type. All the meshes 
should now belisted together. Click on thef rst 
moda, hold down Shift, and click on the last one 
to select themall. Press Gn +G to group then 
into a group. 


Tips and Tricks 


Grouping in Unreal Engine is not the same as Maya, and it 
does not put them into a folder, but rather just remembers 
that they are now “glued” together. The advantage here 
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is that you can quickly click to select them all. But if you 
want to move one of the models in the group, you have to 
ungroup them (Shift +G). 


Step 12: Duplicatethe groups. Hold down Alt and 
drag thegroup to havea copy. Drag the copy 
away until it napsto theonginal group. Drag 
out three more copiesto createa hallway 
(Figure 4,34). 
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Step 13: Drag in thedoor. Go to the door folder. 
Select all the static meshes and drag them into 
theleve. Position the door at the center of the 
end of the hallway (Figure 4.35). 

Step 14: Drag in more wallsto block thesideof the 
doors (Figure 4.36). 

Step 15: Drag two sets of windows above the 
door. Go to the windows folder. Sdect 
both the windows_window_01 and 
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Why? 


windows window 01 glass, drag themto the 
level, and position then abovethe door. Hold 
down Alt and drag up to have another copy of 
the window. Thetwo windows should be ableto 
f Il inthe gap abovethe door (Figure 4.37). 

Now we have built our hallway. Wecan 
immediately see that the lighting isf at. If 
thereis no light in the hallway, it should 
appear to be much darker than it looks. 
You can also seea waming says: LIGHTING 
NEEDS TO BE REBUILT (199 unbuilt objects) 
on theupper left comer of the viewport. 
Go to the Toolbar, click on the drop-down 
arrow on thenght of the Build button, and 
click Build Lighting Only. The shortcut of it is 
Qr +Shift + (Figure 4.38). 

Unreal now starts to build the lighting for 
thelevd. The building progress is displayed 
at the lower nght of the window. Once Unreal 
f nishes building the lights, it applies the 
results to the modas, and our hallway is now 
looking extremely dark (Figure 4.39). 


So what does Build Lighting do? Well, calculating lights in 
realtime is too heavy for current hardware. So, the lighting 
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for anything that is not moving during gameplay is pre- 
rendered and applied to the model. This pre-rendering 
process is called light building. 
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Let’s drag in some lights. 





Step 16: Create some point lights. Go to the Mode 
pana. dick on the Lights section, drag a point 
light to the hallway, and place it slightly bdow 
the calling. This point light should do a good 
job lighting the dark hallway, press Gn +Shift + 
to build the lighting again. After building the 
lighting, our hallway now feels more realistic 
(Figure 4.40). 

Our mode's seem to be working so far. 
But there aretwo major f aws. First of all, 
by the look of the composition, wethink 
that thereis just too much orange. It would 
be better if wecan makethef oors white. 
Second, everything looks a bit shinier than 
what they look like in Substance Painter. 
We havetwo options here. Oneoption isto 
go back to Substance Painter and make the 
color of thef oor white and make everything 
rougher. But it may require us to go back and 
forth many timesto get thenght color and 
roughness we want. The second option isto 
set up some controls in the material so that 
we can make changes here. 

Let’stakea look at how we can set up the 
second method in Unreal Engine. 


Tutorial 4.4: Create Parameters 
for Our Materials 


Step 1: Set up a desaturation parameter. Go to 
the shared folder and double click on the 
Substance Base Mtl to open it in the Material 
Editor. Thereis still a Param node in there; select 
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File 
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it and pressthe delete button to delete it. Right 
dick in any empty area of the graph and type 

in Desaturation. Hit the Enter button to createa 
Desaturation node. Connect the RGB output pin 
of the Base _Color nodeto thef rst input pin of 
the Desaturation node. Connect theoutput pin 
of the Desaturation nodeto the Base Color input 
of the Substance Base Mtl. Right click theempty 
area again and typein scalar, and in the search 
result, click on the ScalarParameter to create a 
ScalarParameter node. Connect the output pin of 
this ScalarParameter node to the Fraction input 
of the Desaturation node. Finally, in the Details 
pana, set the Parameter Nameto Desaturation, 
and press the Save button to savethe material 
(Figure 4.41). 


Step 2: Test the desaturation parameter. Go to the 


f oorsfolde,, double click thef oor 4k material 
instanceto open it in the Asset Editor, under the 
Parameters Groups in the Details pana, check on 
Desaturation. Drag the desaturation value up to 
1 to desaturate it completely. Our f oors are now 
all white (Figure 4.42). 
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Step 3: Create a hue shifting parameter. Go back 
tothe Substance Base Mtl, and createa 
HueShift node in the same way we created the 
Desaturation node. Connect the RGB output pin 
of the Base_Color to the Texture (V3) input pin of 
the HueShift node. Connect the Result output pin 
of the HueShift nodeto thef rst input pin of the 
Desaturation node. Hold down the S button and 
click anywhereto add a ScalarParamater (this 
isa Shortcut to create a ScalarParamater node). 
Namethe new ScalarParamater node Hue_ Shift 
and connect it to the Hue Shift Percentage (S) 
input of the HueShift node. Press the Save button 
again to savethe change (Figure 4.43). 

Step 4: Test the Hue_Shift parameter. In the 
shared folder, double click Substance _Base_ 
Mtl_ Inst to open it in the Asset Editor. Check 
on the Desaturation and Hue_ Shift. Set the 
Desaturation valueto 0.1 to makethe color 
lesser saturated. Set the value of the Hue_ Shift 
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to 0.015 to makeit a bit yelower (you can usea 
dif erent value if you want to havea completely 
dif erent color). All the changes we have made 
hereaf ect all mode's because it isthe parent 
material of all other mode's; this is why we have 
this Substance Base Mtl_ Inst. However, the 
f oor remains white becausethef oors 4k has 
its own Desaturation checked, which overwnites 
what is happening to its parent (Substance _ 
Base Mtl_ Inst) (Figure4.44). 

Step 5: Add roughness contrast and shifting controls. 
Go back to the Substance_Base_Mtl again. 
Add a CheapContrast node (right click and 
search to f nd and create any node). Connect 
theG output pin of theAO Roughness_ Metallic 
texture parameter nodeto the In input pin of 
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the CheapContrast node. Hold down Sand click 
anywhereto create a ScalarParamater. Name 
the ScalarParamater Roughness_Contrast 

and connect it to the Contrast input pin of the 
CheapContrast node. Hold down A button 

and click to create an Add node. An Add node 
adds its input A and input Btogether asthe 
output. Connect the Result output pin of the 
CheapContrast to the A input pin of the Add 
node. Hold down Sand click to create another 
ScalarParamater and nameit Roughness_ Shift 
and connect it to the B input pin of the Add node. 
Connect the output pin of the Add nodeto the 
Roughness input pin of the Substance Base Mtl 
node. Press the Save button to save our material 
(Figure 4.45). 


Tip and Tricks 


What we have been doing in the Material Editor is called 
node-based scripting. In case you didn’t notice, you are 
already doing some programming here. We have coded 
a Shader that allows us to control many aspects of the 
material already. The programming we do later on is 
going to be very similar to this. 
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Step 6: Test the Roughness Contrast and 
Roughness _Shift parameter. Double click 
Substance Base Mtl_Instto open it. Check on 
the Roughness Contrast and Roughness_Shift 
parameter. Set the Roughness Contrast value 
to 0.15 andthe Roughness Shift valueto 0.25 to 
get a much better roughness value and contrast 
(Figure 4.46). 


Why? 


We cranked up the contrast of the roughness by setting 
the Roughness Contrast bigger than 0, this isto enhance 
the variation we created for the roughness. Take a look at 
the highlights on the walls and f oors. Notice that there are 
visible variations, which makes them fee! very detailed. 


Steo 7: Create Glass Material. The material of the 
glassis fundamentally dif erent because it has 
transparency. Select the Substance Base Mut. 
Press Grrl +W to createa copy of it and namethe 
copy Substance Base Transparent_ Mtl. Double 
click to open it in the Material Editor. Sect the 
Substance Base Trangparent_Mti node. Inthe 
Details pana of the Material Editor, changethe 
Blend Modeunder the Material section from 
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Opaqueto Translucent. After the change, the 
Metallic, Normal, and Roughness input of the 
material become grayed out. To f xthat, scroll 
down to the Translucency section. Set the Light 
Modeto Surface TranstucencyVolume. Hold down 
theS button, dickto createa ScalarParameter 
node, and nameit Opacity. Connect the Opacity 
ScalarParameter nodeto the Opacity input pin of 
the Substance Base Transparent_ Mtl. Pressthe 
Save button to savethe material (Figure 4.47). 


Tips and Tricks 


There are many settings under the lighting Mode in 

the Translucency section of the material. Luckily, tf you 
hover your cursor on any of the options, a hint pops up 

to show you exactly what this option means. By reading 
through all the options, it is clear that the Surface 
TranslucencyVolume is the best setting for glass and water 
that is balanced for quality and performance. 
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Step 8: Apply the Substance Base Transparent. Mtl 


to the glasses. Right click on the Substance _ 
Base_Transparent_Mtl and select Create 
Material Instance and press enter to commit 
the name. Go to thewindows folder, double 
click on thewindow_glass_4kto open it. Under 
the General section of the Details pane in the 
Asset editor, set the Parent to Substance _ Base _ 
Transparent_Mtl_ Inst. Go to the pot folder 

and set the parent of pot_glass_2kalso to 
Substance Base Transparent. Mtl_ Inst. Drag 
both pot_pot_bodyand pot_pot_glassto the 
level. Go back to the Shared folder and double 
click Substance Base Transparent _Mtl_ Inst to 
open it. Check Opacity on and set its value to 

0.3 to make it 70% transparent, which givesita 
glass-likefeel (Figure 4.48). 


Step 9: Set up refraction. Go back to Sulbstance_Base_ 


Transparent_ Mtl. Hold down Land dickto create 
a Lep node. Lerp stands for linear interpolation. A 
Lerp node interpolates between its A and Binput 
baseon theAlpha input. Ifthe alpha is 1, the value 
of input Bbecomesthe output; if alpha isO, the 
value of A becomes the output. If thealpha value 
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isa randomvaluen (between Oand 1), then the 
output isA x(1—n) +B xn. Sdect the Lep node 
and set the Const A valueto 1 in the Details pand. 
Createa ScalarParamater nodeand nameit IOR. 
Inthe Details pana, set the Default Valueto 152. 
Connect IORto the B input pin of the Lerp node. 
Createa Fresnel node, and connect its output pin 
to the Alpha input pin of the Lerp node. Connect 
the output pin of the Lap nodeto the Refraction 
input of the Substance Base Transparent_ Mt 
node (Figure 4.49). Press the Save button to save 
thematenal. 


Why? 


When lights hit the surface of a dif erent medium, 

the direction of the light got changed (refracted). The 
refraction setup of our materials allows us to mimic that 
ef ect. IOR stands for index of refraction, and it represents 
how much light got refracted. The index of refraction of 
glass is 1.52. Fresnel node generates a grayscale gradient 
that is brighter at the edge of the model and darker at 
the center of the model. In our material setup, we use 
Fresnel as the alpha of the lerp to interpolate an value 

of 1 with the value of our IOR (1.52) and use the result as 
the Refraction input of the material. This setup means 
that the IOR at the edge of the model is 1.52, and the IOR 
at the center of the model is 1 (no refraction). We do this 
because lights refract more when it hit the surface at a 
bigger angle and do not refract (or change direction) at all 
when hitting direct on. Figure 4.50 shows the IOR value 
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across the glass of the pot and the result of our setup. 
Notice how the edge of the glass Is refracting the lights, 
which distorts the things we see behind it. 


Step 10: Light emissive material: Go to the Shared 
folder. Right click in the empty area and select 
Material. Nameit Emissive Base Mtl. Double 
click to open Emissive_Base_Mtl. Change 
the Shading Mode to Unlit in the Materials 
section of the Details paned. The material now 
only has Emissive Color input available. Hold 
down V and click any empty area to create 
a VectorParameter (color parameter) node 
and name it EmissiveColor. Hold down the M 
button and click to createa Multiply node. Hold 
down the S button and click to createa Scalar 
Parameter node and name it Emissionintensity. 
Connect thef rst output pin of the EmissiveColor 
nodeto theA input pin of the Multiply node, and 
connect the Emissionintensity to the Binput pin 
of the Multiply node. Connect the output pin of 
the Multiply nodeto the Emissive Color input pin 
of theEmissive_Base_ Mtl. Press the Save button 
to savethe material (Figure 4.51). 
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Step 11: Assign material to thelights. Right dick 
ontheEmissve_Base Mtl, select Create 
Material Instance, and hit Enter to commit the 
default name. Doubledidkto open it. Check on 
EmissiveColor and set the color to white. Check 
on Emissionintenstty and giveit a valueof 2. Right 
dickontheEmissive Base Mtl Instand select 
Create Material Instance. Namethenew matenal 
InstanceCelling_light_O1_light_mtl. Create 
another two material instances and namethen 
Celling_light_O2_light_ntl and Floor _light_light_ 
mti. Drag thethree new Materials Instancesto the 
lightsfolder and sdect Move Here. Doubleclick 
thelights_celling_light_O1 moda to openitin 
the Asset Editor. Drag Galling_light_O1_light_nul 
totheHemert 1 slot to assign it to thelight bulb 
part ofthemodd. Draglights_celling_light_O1 
to the celing of our hallway to check theresult 
(Figure4.52). Assign Calling_light_02_light_mtl to 
thelights_caling_light_O2and Floor light_light_ 
nti tothelights_f oor lightthesameway. 

You are probably already noticing 

that thelights we modeled are just mode's. 
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They do not behavelikea light when you 
drag themin even with emissive materials, 
not likethe point lights we have in our test 
level, that is. To createa light that can litthe 
environment with the lights models astheir 
Shapes, we need to composelights and our 
mode into something we call an Actor. 


Actors 


Anything we can drag into our level is an actor. The model 
we dragged in is atype of actor called StaticMeshActor. 
The light we dragged in is a PointLight actor. If we hit the 
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Play button, the f rst-person character we are controlling 
is a type of actor called Character. We can make any 
custom actors and give them dif erent functionalities. 
Let’s make our light actors. 


Step 12: Createa light Actor. Go to the lights folder 
in the taticMeshes folder. Right dick in the 
empty space and click on Blueprint Class. In the 
pop-up Pick Parent Class window, click on the 
Actor button. Anew asset with the default name 
NewBlueonint got created in the Content Browser, 
and let’stypein BP_celling_light_O1to nameit. 


Why? 


You are probably wondering what blueprint class is? What 
does Parent Class mean? These are programming terms 
that we will explain later. For now, all you need to know 

iS we are creating a light actor that we can drag into the 
level to light the scene. 


Step 13: Add Static Mesh components. Double click 
theBP_celling_light_O1to open it in theAsset 
Editor. You can seea viewport inthe middle 
of the editor and a Components panel on the 
upper left comer. dick on the Add Component 
button in the Components pand and select 
StaticMesh. Go to the Details pane on thenght 
side of the editor. Gick on the drop-down list 
of the Static Mesh setting of the Static Mesh 
section. All static meshes (modes) are listed 
here. Typein lights ceiling light _O1tof nd our 
lights_calling_light_O1 mode and click on it. 
Ourlights ceiling light_O1 now appearsin the 
viewport in the middle (Figure 4.53). 


Tips and Tricks 


Anytime we have along list in a drop-down menu, we can 
type in keywords to f Iter out irrelevant items and f nd the 
one we are looking for. Sometimes you don't have to type 
in the full name. 


Step 14: Add Spot Light component. Click on the Add 
Component button. Type Spot Light and hit Enter 
to add a Spot Light component. It also appears in 
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The component used to create an instance of a StaticMesh. 


see full documentation 





the viewport in the middle. Use Rotate and Move 
toolsto place it under thelight and facing down. 
Go to the Details pane, set the Mobility under 
thetransform section to Stationary, and set the 
Mobility of the &aticMesh component we added 
in the previous step to Static. Press the Compile 
button and the Save button in the Toolbar 
above the viewport to commit our changes 
(Figure 4.54). 
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Mobility 


Mobility means the mobility of the object. Stationary and 
Static mobility both means that the object is not going to 
move. That is a requirement for anything you want to use 
for baked lighting. The Stationary option allows the lights 
to change color without rebaking the lighting. We are 
going to explain the details and dif erences of this option 
later in the lighting chapter. 





Step 15: Test BP_calling_light_OL Deleteall other 
lights and Drag BP_ceiling_light_Oltothecalling 
of thehallway. Press Gn +Shift + to build the 
lighting again. The BP_celling_light_Olisnow 
lighting the hallway we created (Figure 4.55). 

Step 16: Create another two lights. Follow the 
same steps from Steps 12-15 to create BP _ 
calling_light_02 and BP lights foor light. The 
BP_celling_light_02 uses one-point light even 
there aretwo light pipes because using two lights 
means twicethe cost, and we can get a similar 
result with onelight. Set the Source Radius to 8 
and the Sourcelength to 195 to maketheshape 
of the point light looks like a long pipe. One 
RectLight is used forthe BP lights foor light. 
Movethe RectLight in front of thelight of the 
modal. To match thesize of the RectLight to the 
moda, set its Source Width to 20 (Figure 4.56). 
Weare going to talk more details about lights in 
the lighting chapter. 
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Steo 17: Test all three lights in the hallway 
(Figure 4.57). 

Step 18: Monitor material. The monitor material 
should besimilarto the Emissive_ Base Mtl, but 
we want to giveit a scanlineef ect, and wewant 
the monitor to show something. Select Emissive _ 
Base_Mitl and Press Qtr +W to duplicate it, 
and namethe duplication Screen _Base_Mitl. 
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Doubleclick to open it. Deletethe EmissiveColor 
parameter. Right click any empty area, typein 
TextureSampleParamete2D, and press enter to 
create a TextureSampleParameter2D (the same 
texture parameter we used to load our Base 
Color and other textures in the Substance_Base_ 
Mtl). Namethe new TextureSampleParameter2D 
node ScreenTexture. Connect THE RGB output 
pin of the ScreenTexture nodeto theA input pin 
of the Multiply node (Figure 4.58). 

Step 19: Add Scanlines. Right click on any empty are 
and search for LinearSine. Press Enter to create it. 
Usethesame method to createa LinearGradient 
node. Connect the VGradient to the Value (S) 
input pin of the LinearSine node. Createa Scalar 
Parameter, name it ScanLineSize, and set its 
Default valueto 0.03. Connect ScanLineSize 
to the Period (S) input pin of the LinearSine 
node. Hold down the M button to createa 
Multiply node. Connect the Linear Sine output 
pin of the LinearSinenodeto theA input of the 
Multiply node. Connect the RGB output pin of 
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the ScreenTextureto the Binput of the Multiply 
node. Finally, connect the output pin of this 
new Multiply nodeto theA input of the Multiply 
nodethat has Emissionintensity connected 

to it. To visualize what we arehaving, change 
the Default Value of Emissionintensity to 1. Go 
to the viewport at the upper left comer of the 
Material Editor. dick on the plane icon to switch 
the preview moda to a plane. You may have 

to navigatethe viewport to seethe front of the 
plane (Figure 4.59). 


Why? 


Ok, for anyone who hates math, the LinearSine might 
already be making you scratch your head. However, math 
is the foundation of everything we do in computers. We 
do not have to learn the details of the Sine wave but you 
can imagine it as a repeating up and down (Black and 
White) wave. What we are building here is a wave across 
the V direction of the UV that has a wavelength of 0.03 
(the value of the ScanLineSize parameter). The VGradient 
of the LinearGradient connects to the Value (S) input of 
the LinearSine ensures that it is a V direction wave. Try 
using the UGradient instead of the VGradient, and you can 
see the waves change to the U direction. 
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Step 20: Makethe scanlines move. Create a Time 
node anda Multiply node. Connect the Time 
nodeto theA input of the Multiply node. 

Create another Scalar Parameter and name 

it ScanLineSpeed. Set the Default Value of 
ScanLineSpeed to 0.1. Connect ScanLineSpeed to 
the B input of the Multiply node. Hold down theA 
button and click to createan Add node. Connect 
the VGradient output pin of the LinearGradient 
to theA input of the Add node. Connect the 
Multiply node to the B input of the Add node. 
Finally, connect the Add nodeto the Value (S) 
input pin of the LinearSine node (wherethe 
LinearGradient was connecting to). Weshould 
now seescanlines moving (Figure 4.60). 

Step 21: Fix shading group issues. Open the 
monitors folder. Double dick to open monitors _ 
Monitor OL You can seethat there is only one 
element in the Material Sots because we did not 
assign a dif erent material for the screens of the 
monitor. 
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Open Maya again and load our Set _ 
Model.mbf le. Go to the outliner and f nd 
Monitor OL Press Cin +1 to isolate it. Sect 
all the faces that belong to the monitor. 
Changethe workspace to UV Editing. In the 
UV Editor, hold down Shift +Right mouse 
button and select Create UV Shell. 

Hold down Shift +right mouse button 
again, and go to Modify > Layout [0]. Inthe 
pop-up Layout UVs Options, set the Scale 
Mode at the bottom to Non-Uniform and 
press Layout UV6. The UVs of the screen now 
f Ilsthe entire UIV1 Space. Make surethat 
thefaces of the screen are still selected. Go 
back to the 3D viewport, hold down the 
right mouse button, and select Assign New 
Matenal. In the pop-up Assign New Matenal 
window, select Blinn. The Attribute Editor 
should pop up, if not, press Ctrl +A. 

Hold down thenght mouse button again 
and select Material Attributes. Set the name 
of the Blinn Monitor O01 Screen OL Mtl. 
Thereis another small screen on the number 
pad on thesideof the big screen. Makethe 
same UV adjustments to that small screen 
and give it another Blinn material and name 
thematenal Monitor 01 Screen 02 Mtl.Do 
thesamething to all other Monitors Modes. 
You need to rotatethe UV shells after the UV 
layout command if the UIV1 checker texture 
is upside down or tilted and do a UV layout 
one moretime. Figure 4.61 shows the result of 
the Monitor 02 mode. 
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Why? 


We make the UVs of these screens f II the U1IV1 space. This 
Way, if we want to use a camera to capture the scene and 
show the captured scene on the monitor, it needs to read 
the full UIV1 space to read the full captured image. We 
also give every screen new material So we can assign our 
Monitor material to them. 


Step 22: Reimport to UE4. Select the monitors 
group. Go to File Export Selection. Navigate 
to the monitors.flox file we exported earlier, 
click on that old file, and press the Export 
Selection button. A pop-up window shows 
up and asks if we want to replace it. Press 
Yes. Go back to Unreal Engine. Select all four 
monitors in the Content Browser, right click 
on any one of them, and choose reimport. A 
window pops up that asks about what to do 
to the new materials we assigned because 
they do not exist before. J ust press the Done 
button to leave them empty. Double click 
monitors Monitor 02 to open it, and now we 
can see that there are three more elements 
with the name Monitor 02 Screen O1_ 

Mtl, Monitor 02 Screen 02 Mtl, and 
Monitor 02 Screen_03 Mtl waiting to be 
assigned with new materials. They are now 
using worldGridMatenial, and this material is 
the default material for any slots that are not 
assigned (Figure 4.62). 


Tips and Tricks 


Every time we need to update the model, we can just go 
back to Maya and make the changes. Export and replace 
the old fbxf le, and right click on the model in the Content 
Browser and select Reimport. 


Step 23: Create and Assign the screen material 
Instances. Go back to the Shared folder. Right 
click onthe Screen_Base_ Mtl and select Create 
Material Instance. Press enter to commit the 
default name. Assign this material instance to 
all thescreen matenal slots of all the monitors 
(Figure 4.63). 
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Weare going to replacethe textures used 
for the monitors later when we are doing 
game programming. For now, they arejust 
using a default texture that Unreal Engine 
Supplies. 


Conclusion 


We have f nished our asset import and material creation 

in our Unreal project. As you can see, transferring models 
and textures into the game engine Is not as simple as we 
like it to be. Also, we have spent some time creating actors 
and materials to make light and monitors functioning. We 
have also covered changing and reimporting assets. All 
these steps are going to make our future steps easy. 


We can now f nally move on to build our game level. 
We are going to move upon that fun joumey in the next 
chapter. 








In this chapter, we are going to use the assets we created 
in the previous chapters to build our level. We have 

built our LEGO pieces, and the time has come for us to 
use them in whatever way we see f t. After building the 
interior of the level, we are going to use the landscape 
feature of Unreal and other free assets to build a natural 
exterior. 


To review the whole workf ow. We have modeled our 
modular pieces and other props and created UVs for them 
in Maya. We created textures Using Substance Painter and 
relies heavily on it to add surface details. We Export all 
models in Unreal with careful organization and set up all 
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the materials in Unreal Engine. It is crucial to remember 
that it has never been possible to create a game with one 
piece of software along. Understanding and leaming 
software gives you informed ideas on how to tackle our 
goal ef ciently and smoothly. Please keep leaming new 
things and update your workf ow if you f nd something 
worth trying. 





Unreal Engine is designed to handle the best graphic 
possible with a crazy amount of models, shaders, and 
lights. As long as we create our model economically, we 
can throw alot of them in the level before it istoo much. 
So try to add and combine more models if you can when 
building the level. 


When creating our level, keep in mind that other than 

the visual quality, the gameplay aspect of the level is also 
essential. We always want to think about how the player 
would go around our environment, will things get boring, 
is there any backtracking, and how to avoid that. After all, 
the game is an experience we created, and we want to 
make sure that the players feel what we want them to feel. 


Let usjump right in to start building our level. 


Tutorial 5.1: Create the 
Interior of Our Level 


Step 1: Anew Level. Press Ctrl +Sto save our test 
level. Go to File New Level and select the 
Default. Anew level got opened with a f oor, 

a generic sky, and a sun. Press Gl +Sto pull 
out the Save Level window. Navigateto the 
Level folder and TypeLeval 01 Awakeninthe 
Nametext f dd. Press Saveto save it. Go to 
Edit > Project Settings. In the pop-up Project 
Settings window, click on Maps and Modes 

in thelist of categories on theleft and set the 
Editor Startup Map and Game Default Map to 
Level O1 Awaken. The next time we open our 
project, Level. O1_ Awaken is going to beloaded 
(Figure 5.1). 

Step 2: Building thef oor plan for the starting room. 
Cickthef oor in the middleto select it and 
press Deleteto delete it. Go to f oors folder and 
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dragf oors _f oor_O1 totheleva. In the Details 
panal, set the Locations X, Y, and Zall to zero 
to bring it to theongin. We want to usethetop 
faces of thesef oor pieces later on in the bigger 
rooms. Rotateit 180 degrees to f ip it upside 
down. Make surethat the napping of the gnd 
is 16 units (upper right comer of the viewport). 
If the snapping options are somehow still by 
10, go to Edit > Editor Preferences. In the Editor 
Preferences, type in power to f Iter the settings 
and check on Use Power of 2 Snap Size. After 
that, drag thef oor down, so it isjust under the 
grid (Figure 5.2). 

Step 2: Create three f oor pieces in a row. Hold down 
Alt and Drag the X (red) axis of the move tool to 
havea copy of thef oor, and keep dragging until 
it aligns with the previous one. Drag out another 
duplication, so wehavethreef oor pieces 
appropnatey aligned (Figure 5.3). 
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Step 3: Fill thef oor with nine pieces. Select all three 
pieces. Usethe Alt and Drag method to copy two 
morerows of thef oor piecesto createa 3 x3 
f oor (Figure 5.4). 

Step 4: Add variations. Select thef oors foor 04 
piece in the Content Browser. Select thef oor 
pieces at thefour comers in the viewport. Right 
click on any of the selected pieces and choose 
Replace Selected Actor With Floors f oor 04 
(thesquare piece has a frameand a metal grid 
inside). The four comers are now replaced with 
foors foor 04 (Figure 5.5). 

Step 5: Fill the bottom of thef oors f oor 04 pieces. 
Dragf oors f oor O3to theleva. UsetheAlt and 
drag method to havethree more copies, so the 
four of them together becomes a square piece. 
Press Ctrl +G to group them. Rotatethe group 
180 degrees. You can seethat the back of then 
has pipe-like textures. Movethe group under the 
grid piece. Copy the group using Alt and drag to 
all theother three comers (Figure 5.6). 
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Step 6: Add baseto the wall pieces. Drag f oors _ 

f oor _02to thelevel. Moveand duplicate it to 
make it surround two sides of thef oor. Surround 
onesideof thef oor with f oors f oor 03 

(Figure 5.7). Noticethat four f oors f oor 03 
pieces are used to cover theonesideof thef oor 
because of the extended length added by the 
foors foor O02 pieces. 

Step 7: Create wall pieces. Go to the walls folder. 
Drag walls _wall_0O1 to thelevel. Drag and 
duplicate the wall so that thereis a wall above 
every one of the outer f oor pieces. Align the walls 
with thef oor pieces on the outside (Figure 5.8). 

Step 8: Drag thewalls Tumning_wall_ Olto the 
comers of the wallsto block the opening 
(Figure 5.9). 
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Tips and Tricks 


When building our scene, there is no rule on how a piece 
should be used. The walls Turnning_wall_ 01 is designed 
to be used for the turning of a hallway. It doesn’t mean 
that we cannot use it for any other purposes like blocking 
the comer. 


Step 9: Drag inthe door. Go to thedoor folder. 


Select door door frame, door door |, and 
door _door_r. Drag themall to the leva. Align the 
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door to the edge of the middlef oor pieceof the 
opening side of the room (Figure 5.10). 

Step 10: Add windows abovethe door. Go to the 
windows folder. Select both the windows _ 
window _Oland windows window 01 glass. 
Drag themto theleve and placethennght 
above the door. Hold down Alt and drag up to 
stack another window on top (Figure 5.11). 

Step 11: Add two extra door frames. Go to the walls 
folder. Drag thewalls door frame f atinto 
theleve and placeit on onesideof the door. 
Duplicate and place another oneon the other 
side of thedoor (Figure 5.12). 

Step 12: Fill the rest of the walls. Add two more 
walls wall Ol onthesideof the door. Fill the rest 
of the comers with walls_wall_ comer frame 
(Figure 5.13). 





ARAF 510 Raetrecha: 





AGURE 571 Raetwowrdbnsao.ethechao: 





AGRE 52 Acotwoetracho fravescitrescecithecha. 





AGRE 533 Ail theretcttrenalls 


Tips and Tricks 


It is up to you tof Il in the walls and corners the way you 
see f t. Feel free to use dif erent pieces. 


Step 13: Fill the room with some props. Go to the 
boxes folder. Drag a few boxes to thef oor. Place 
them primarily in the comers. Drag a few more 
props you seef tin the leva tof Il the space but 
keep the middle empty. Our player's spawn point 
isin the middle (Figure 5.14). A copy of BP_lights_ 
f oor_lightis placed at oneof thecome’s. 
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Step 14: Fill the ceiling. Fill the ceiling with thef oor 
pieces. Make surethat ther dark sideis facing the 
inside (Figure 5.15). 

Step 15: Decoratethe Gelling. Drag a BP_calling_ 
light_O1 to the middle of thecelling asthe 
primary light. Drag a BP_ ceiling light 02 
between thetwo door frames as the doorway 
guide lighting. Drag cables Cables 10behind 
the door light to give the illusion that cables are 
connecting to it. A ceiling vent is also added to 
decorate the calling better (Figure 5.16). 
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Tips and Tricks 


We add alight to the door to help the player see it easily. 
The cables added behind the light help to make the door 
area more attractive and casting interesting shadows. The 
level designer should always think of ways to direct the 
eyes of the player. 


Step 16: Add tilted windows. Go to the windows 
folder. Drag windows _Tilt_03 and windows _ 
Tilt_window_03 glassto thelevea, and place 
them between the door frame and the column of 
the wall. Thesetilted windows add some break 
up to the 90-degreef oor and wall transition 
(Figure 5.17). 

Step 17: Add pipes. Go to the Pipesfolder. Drag a 
few pipes into thelevel, usethe move, and rotate 
tool to assemblethem. This part ts all up to you; 
be creative on how they connect and tum. The 
Snapping should allow you to match them nicely 
(Figure 5.18). 
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Tips and Tricks 


The pipes are one of our main assets to help make 

the level looks detailed. It can quickly make an area 

look complicated. It takes some time to build the pipe 
structures. However, they are just LEGO pieces waiting to 
be assembled; don't hesitate to use thema lot and try to 
experiment with variations. 





Step 18: Createthef oor of the tutorial hallway. Go 
to the outside of the door and placethef oors _ 
foor Olin front of it. Add two f oors f oor 03 
on each sideof thef oors_f oor 01 piece. 
Rotate then to make them upside down, and 
realign themwith thef oors f oor 01 piece 
(Figure 5.19). We name this hallway tutorial 
hallway. We are going to use this hallway to 
get the player familiar with the basics of the 
gameplay. 

Step 19: Add detail to thef oor. J ust like how we add 
detail to thef oor, movethe four f oors _f oor 03 
pieces down and placef oors f oor 05 pieces 
abovethen (Figure 5.20). 
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Tips and Tricks 


It is easy to feel repetitive with only one type of f oor. 
Combining various pieces to make the f oor dif erent is 
crucial to avoid a boring scene. 


Step 20: Group and duplicatethef oor pieces. 


Select thef oors f oor Olandfoors foor 08 
pieces we create for the hallwayf oor and press 
Ctrl +Gto group them. You can now select then 
altogether by clicking on any oneof them. The 
pivot is also centered on the bounding box of the 
whole piece. With the group selected, hold down 
Alt and drag the Y (green) axis to duplicate a few 
tiles (Figure 5.21). 


Step 21: Duplicatethe grid. Select thetwo f oors _ 


f oor_05 pieces. Because these grid pieces 

are shorter pieces than the others, we have 

to duplicatethemdif erently. Press Œr +Gto 
group thetwof oors_f oor_05 pieces. Drag out 
a copy (hold down Alt and drag the Y-axis) of 
the group and align it to the onginal one. Go 

to the Details pana, and set the Scale Xto —1 to 
f ip them. Select both groups and drag out more 
copies to cover the rest of the sde of the hallway. 
Thelast copy might extend too much out of 
thehallway. Press Shift +G to ungroup them, 
and delete the extra ones. Finally, move these 
grid pieces across the Y-axis to align the end of 
the gnid pieces and the rest of thef oor pieces 
(Figure 5.22). 


Tip and Trick 


Grouping can be useful to organize the scene. Be aware 
that grouping in Unreal Engine does not create a folder 
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to contain the pieces like Maya. Instead, Unreal creates 

an extra GroupActor in the World Outliner to represent 
the group. A dif erent way to organize the scene Is to 
create folders in the World Outliner. To create a folder, just 
click on the folder button on the right of the search bar 

at the top of the World Outliner. You can drag anything 

to the folder to put it under the folder. You can also drag 
anything out of the folder. If you have something selected 
and click on the folder button, it creates a folder with the 
selected objects placed inside the folder. Unfortunately, 
folders in Unreal Engine are not translations like Maya. You 
cannot move a folder to move all objects inside the folder. 
However, you can right click on any folder and select 
Select > All Descendants to select all the objects in the 
folder. 


Step 22: Placethe walls. Placethewalls_ wall 02 
pieces for the wall of the hallway. You can group 
them before duplicating then for the other side 
(Figure 5.23). 

Step 23: Add ceiling to the hallway. Select the 
foors f oor 01 piecewecreated for the ceiling of 
the start roomand drag out duplications asthe 
calling of thehallway. Movethen down 16 units 
(Unreal snaps every 16 units, so you just need to 
drag them down and stop dragging thef rst time 
it snaps.) (Figure 5.24). 

Step 24: Add lights, pipes, crates, and other props to 
add detail to the hallway. This step is mostly up 
to you to choosethe combination of props you 
what to throw in the leva. Keep in mind that you 
want to avoid blocking the way and experiment 
with vanations (Figure 5.25). 

Step 25: Create thef oor of the turning section 
of the hallway. Thetuming of thef oor has 
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four f oors foor 01 pieces in the middle and 
two f oors _f oor_02 pieces on each of thetwo 
sides that connect to the straight hallway 
segments. We had designed it this way when 
we were creating the modas; Figure 1.56 in 
Chapter 1 shows the desired module layout 
(Figure 5.26). 

Step 26: Add the walls of the turning section. Go 
to the walls folder. Drag the walls Tumning_ 
wall_ Ol and walls Turnning_wall_ 02tothe 
level and placethem, so they connect to the 
end of the walls of the hallway seamlessly 
(Figure 5.27). 
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Step 27: Create the ceiling of the tuming section. 
For the ceiling of thetuming section, we just 
need to drag a copy of thef oor and moveit up 
(Figure 5.28). 


Why? 


We could also model the f oor of the turning section as 
a dif erent piece. However, it saves time to create only a 
handful of pieces. We can get away with the extra surfaces 
protruding out because the player can never see them. 


Step 28: Create the rest of the hallway. Go ahead 
and createthe rest of the hallway that connects 
to thetuming part. Use your imagination and 
creativity to LEGO it using any pieces you seef t 
(Figure 5.29). 

Step 29: Add wall frames. Go to the walls folder. 
Therearesomecolumn modes with “frame” in 
their naming. These frame models are intended 
to be protrusion shapes that work likethe frame 
of the walls or supporting columns. For every 
two walls, add a frame modal to break up the 
f atness of the walls (Figure 5.30). It is benef cial 
to placethese frames right over the contacting 
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seam between two walls so that it is ableto block 
baking artifacts that usually happens on seams. 
walls _door_frame f at and walls _wall_ comer 
framearetheones used here. 

Step 30: Createthef oor and wall for the camera 
room. Drag somef oors, walls, and doors to 
block out the next roomthat connects to the end 


of our hallway. We call this new room camera 
room. This camera room contains a consolethat 
allows the player to check a security camera 
(Figure 5.31). 


Step 31: Add extra height and break up to the walls. 


Add another 128 cmheght to the walls to make 
it higher. Thetilted windows are used to makeit 
more interesting. Figure 5.32 shows thelayout 
the book uses, but feel freeto do it dif erently. 
Finally, drag a copy of thef oors asthe calling. 


Step 32: Fix black ref ections. You are probably 


wondering why the metal part of the pieces 
isso dark. Well, this is because they have no 

ref ection data. In the default setting, ref ection 
isnot calculated in realtime but rather baked as 
a map to save performance. To get this baked 
ref ection to work, we need to drag in ref ection 
captures to capturethe ref ection map. Go to 
the Modes paned. Type Box Ref ection Capture. 
Box Ref ection Capture should now bethe only 
option in thelist below the search bar. Drag the 
Box Ref ection Captureto the leva. Moveand 
scaleit, so it’s orange-bounding boxes covers 
the camera room. It isok if the bounding boxes 
of the Ref ection Captureisa little bigger than 
the room. Drag three more copies of the Box 
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Ref ection Capture and usethemto cover the 
two hallways and thestart room; itis also f neto 
overlap then (Figure 5.33). Weare now ableto 
see the captured ref ection on the metal part of 
the pieces. 


Tips and Tricks 


If your graphic card supports realtime raytracing, you can 
toggle it on, so you don’t need to use ref ection capture. 
It is, however, costly and is only suitable for high-end 
hardware. We are not going to use realtime raytracing 

at this point. But, by the time you are reading this book, 
realtime raytracing could already be cheap enough for 
your hardware, so don't hesitate to try. 


Step 33: Add a grid platform. Drag a few gndf oors, 
a staircase, and somehandrailsto thecamera 
roomto add vanationsto thehaght of theleve 
(Figure 5.34). Again, the pieces and compostion 
areup to you and do not haveto beexactly likethe 
f gure stairs stair lowisusedforthestairshere. 

Step 34: Add a monitor. Go to the monitors folder. 
Drag monitors Monitor 02 and monitors _ 
mointor_mounter to the ceiling to place and 
align then below the calling. Adjust the position 
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so that the monitor is hanging in the middle of 
theroom (Figure 5.35). 

Step 35: Place other props. Wehavethegameplay- 
related assets placed. Now it istimefor you to 
becreative and drop other assets in the scene. 
Figure 5.36 shows thef nalized layout of the 


camera room. 
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Tip and Tricks 


It is essential to consider good composition when you are 
building the level. Look at Figure 5.36, and you can see 
that two composition techniques are used: 





1. Lighting. It isnot apparent without building the lights. 
However, you can see the two ceiling lights emphasize 
the door and the monitor. 

2. Guild lines. Cables, the direction of the handrails, and 
the crates are concentrating on the monitor. 


Please take composition seriously throughout when you 
are building the level. 


Step 36: Build thef oor of the security camera 
hallway. Usethe samef oor combination as 
the previous hallway to create another hallway 
outside of the other door of the camera room. 
Make this hallway longer than the tutonal 
hallway. This new hallway is our security camera 
hallway. We aregoing to challengethe player 
with more security cameras. Feel freeto add 
moretums if you wish to make it more appealing 
or challenging (Figure 5.37). 


Why? 


The reason why we always start with the f oor and work 
up from there is that the f oor def nes the playable area. 
We want to make sure that the playable area is def ned 
f rst, and we can add walls, ceiling, and details later. 


str oetans eens 
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Step 37: Create the base shape of the wall forthe 
security camera hallway. Drag three walls _ 
wall_03 pieces to thesideof thef oor and add 
threef oors_f oor O2piecesat their bottomto 
block their bottom (Figure 5.38). 

Step 38: Decorate the wall. Add some pipe 
structures and cables to the wall and add 
walls wall frame_O2 at the edge of the wall 
(Figure 5.39). 
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Tip and Tricks 


For the walls wall. frame_02, we placed it the same way 
we placed the frames in Step 29, It is halfway aligned with 
the wall piece. This arrangement allows the next tile to 
match with it the same way nicely (Figure 5.40). The Frame 
is halfway aligned with the wall pieces. 


Step 39: Group and duplicatethe wall. Select all 
pieces of the wall. Press Ctr +Gto createa group. 
Usethe Alt and drag method to create more 
copies of the wall. Make surethat their edge 
snaps to each other nicely (Figure 5.41). Leave 
some space at the end of the hallway. Weare 
going to makea stair and a door there beforeit 
leads to the next room. 

Step 40: For the other side of the hallway, we use 
thewindows_arc_windowasthewall so we can 
see some exterior. Wealso added a door leading 
to a deroomat the beginning of the hallway. 
Thissideroomis called the handgun room. The 
player is going to acquirea handgun in this 
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handgun room after knocking down a guard in 
it. Also, two pieces of walls wall. comer frame 
are placed at the soot wherethe walls meet the 
camera room (Figure 5.42). 

Step 41: Build the handgun room. The handgun 
room isreiatively small. We used some arcs to 
make it fea dif erent than the other rooms we 
have built. Some overlapping pieces are put 
together to add vanationsto thedoor area 
(Figure5.43). 

Step 42: Build the ceilings for the hallway and the 
handgun room. Usethef oor and arc piecesto 
f II the ceiling of thesecunty camera hallway and 
handgun room (Figure 5.44). 

Step 43: Add a staircase at the end of the hallway. At 
the end of the hallway, placea stairs stair high 
to the middle of the hallway and add a few 
walls f oorsto help to block the surrounding 
(Figure5.45). 

Step 44: Finish the staircase area. It is no dif erent 
than what wehave been doing before. You place 
f oors, walls, doors, windows, extra props, and 
decorations. Figure 5.46 shows the interior and 
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exterior of this section. There are protrusions at 
thetop and bottom of the exterior, which are 
part of the pieces weuseto block the interior of 
this area. 

Step 45: Add clusters of cables to thef oor. Go to 
the cables folder. Drag cables Cables I1 to 
thef oor of the security camera hallway. The 
cables Cables 11 isnot long enough to cover 
the whole width of thef oor. Have another copy 
of thecables Cables 11 pieceandtryto align it 
with the previous one: it is ok if you cannot make 
it perfect (Figure 5.47). 

Step 46: Fixthe connection problems of the cable. 
Drag the cables cable holder 01 piecetothe 
f oor and useit asa strap to cover the connection 
between thetwo cables Cables 11 pieces. We 
can use multiple copies of thecables_ cable_ 
holder_O1 pieces to extend the end of the cables 
to the wallsto makethe whole cable piece 
complete (Figure 5.48). 


Tips and Tricks 


The default gizmo is orient to the axes of the world. Go to 
the upper nght comer of the viewport, and click on the 
button with a globe icon. The button’s icon now changes 
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to a cube. This button is the switch between world axes 
(globe icon) to local axes (box icon). The local axes is easier 
to work with when you are making copies of the cables _ 
cable holder 01 pieces. 


Step 47: Add another branch to our cable cluster. 
Using the same method in Steps 45 and 46, we 
can add another branch of cables to the cluster 
(Figure 5.49). Go ahead and add more cables 
to the group to break up the repetitive wall and 
f oor pattems. 

Step 48: Create thef oor of the storage room. Let 
move on to something bigge—the storage 
room. Thisroomisa placethe player play stealth 
with a bunch of guards. This ground consists 
of 17 x18tilesofthef oors f oor Ol pieces 
wrapped by grid pieces. A door is placed on the 
far sideof the room (Figure 5.50). 

Step 49: Assemble the wall. Using the same method 
used in Steps 37 and 38, we can assemblethe 
wall with walls _wall_ 03, walls _wall_ 04, and all 
the cable and pipe pieces. To add depth, we stuck 
more pipes in the depressions of the surface of 
the walls (Figure 5.51). 
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Step 50: Duplicatethe wall pieces. Group the wall 
weassembled in Step 49, Usethe Alt and drag 
method to duplicatethe walls until all three 
sides of the wall are covered. For the shorter 
side without a door, we chose to use windows _ 
arc_window to break up the repetition. 
windows _arc_window_ sidewall is used to block 
the opening on thesideof thewindows _arc_ 
window piece. Walls door frame_ zigzag is used 
for extra decoration and f Iling on thesideof the 
doors (Figure 5.52). 
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Tip and Trick 


At this point, selecting things by left-clicking might 
become dif cult. You can hold down Ctn +Alt and drag 

to marquee select. If you also hold down Shift, it does 
add select. J ust be aware that you always select the Sky 
Sphere with marquee, make sure that you de-select it 
after you did your marquee select. Another useful tip here 
is right click on the selected models and go to Visibility > 
Show Only Selected; this command isolates your current 
selection. Ctrl +H make everything visible again. 


Step 51: Add tilted windows. Add a row of titled 
windows on top of the long edges of the room. 
Wehave windows Tilt_01, windows Tilt_02, 
and windows Tilt_03, besureto usethenall 
and havesome vanations (Figure 5.53). 

Step 52: Add extra titled windows and ceilings. To 
makethe whole ceiling more interesting, two- 
third of the room hastwo extra rows of tilted 
windows before getting a calling (Figure 5.54). 
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Step 53: Fill the rest of the walls. For the remaining of 
the walls on the shorter sides of the room, weuse 
windows window 01, windows window_02, 
and the windows Tilt_04 piece. windows _ 
Tilt_ 04 isused to block thetnangle gap between 
the rectangular windows and thetilted windows 
(Figure 5.55). 

Step 54: Stairs and platforms. Becausethis room 
ishigh, wecan usethef oors f oor 04, 
foors foor 05,foors foor_5 support, and 
thestairs stair high to createsomehigher 
platformsto add variation to the visual as well as 
thegameplay (Figure 5.56). 

Step 55: Add crates. To makethe stealth gameplay 
possible, we need to add covers or obstacles for 
the players to hide. Wecan useall the modas 
in the boxes folder to build piles of crates in the 
room. After all, this roomis called the storage 
room (Figure 5.57). 

Step 56: Other decorations. Pipes, cables, lights, 
and vents areall added to the storage roomto 
break it up and make It more visually appealing. 
This part might take a littletime, but the process 
isno dif erent to what we have done before 
(Figure 5.58). 
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We have walked you through a whole lot of LEGO 
assembling already. At this point, you can already see the 
pattern of this level. It is shuf ing rooms with hallways, 
and every room has a use for gameplay. By thinking of the 
progression of the game, we can direct the composition 
with conf dence. 


Now it is your tum to create one more hallway and the 
boss f ghting room. Figure 5.59 shows the result we are 
going to use for the next chapter. 


Assignment 


Finish the last hallway and the boss room. The boss Is 

the hero asset in the hero folder, and we also use the pot 
model only here in the boss room to make it more unique. 
This room is going to take you a good chunk of the day to 
f nish. A lot of pipes and cables are used. Please f nish the 
assignment before moving on. 


After f nishing our interior, look outside of the window, 
and we see the empty sky; it feels like we are just f oating 
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in the air. Also, we can see artifacts on the outside of the 
models. They are overlapping, clipping, and sometimes 
just do not make any sense. To f x that, we need exteriors 
to cover all these artifacts and give the player a sense of a 
complete, inf nite environment. We are also going to take 
this opportunity to cover natural environment creation 
with landscape and how to use free assets from the Unreal 
ecosystem. Epic Games is one of the few companies that 
try hard to create an open, free-market. Their ef ort to 

of er all their users and partners free and professional 
tools are unprecedented. 


Let’s move on to create our landscape f rst. 
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Tutorial 5.2: Create the 
Landscape of Our Level 


Step 1: Go to the Modes pand, and click on the 
button with an icon of a mountain. A green grid 
got created at the center of the world. This green 
grid isthe coverage of the landscape. Thesize of 
the gnd istoo big so far, so set the Section Size 
to 15 x15 to makeit smaller. Drag thegizmo to 
movethe landscape, and make surethat the bulk 
of thelandscape is visbleto the windows of the 
security camera hallway and the storage room 
(Figure 5.60). 

Step 2: Sculpt the landscape. Press the Create button. 
Thelandscape now becomes a solid surface, and 
the Sculpt moded is toggled on. Simply click and 
drag on the landscapeto raisethe area under 
the brush. Press the left square bracket button 
(‘T’) to reducethe size of the brush and thenght 
square bracket button (“1”) to increase the size 
of the brush. Hold down the Shift button while 
sculpting lowers the landscape. There arethree 
things to think about when sculpting: 

1. Have enough variations and layers 
of distance when looked at from the 


windows. 
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2. Usethemto help block the player from 
seeing the outside walls of the buildings; 
we do not have to make sure that all 
walls are blocked, and we are going to 
use more natural assets to block the 
artifacts. 

3. Make sure that they do not have abrupt 
up and downs. 

4. Avoid the landscape clipping into the 


interior of the level. 

If the shapes are getting too noisy, click on the 
Sculpt button, and in the drop-down list, choose 
Smooth. The sculpting tool now changes to 
Smooth. With the Smooth tool, sculpting on the 
landscape smoothes its surface. 

Go ahead and sculpt somesimple hills 
around the landscape (Figure 5.61). 


Step 3: Erosion. Changethetool from Sculpting 


or Smooth tool to Erosion. Make your brush 
bigger, click, and drag on thelandscapeto add 
some natural Erosion ef ect. The erosion ef ect 
Sharpened the landscape and made It more 
realistic (Figure 5.62). 


Ok, now we have our terrain sculpted, let’s set up its 
materials. We are going to leverage a service called Quixel 
Megascan to help us. 
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The Quixel Megascan Ecosystem 


Quixel Megascan is the biggest scan library. The Quixel 
team travels to every comer of the world; they capture 

the environment and convert them to textures and 3D 
models. With Quixel Megascan, everyone can have an 
access to a library where only big studios had in their hard 
drive before. Using Megascan, indie developers can create 
an excellent environment in a matter of hours. 


Tutorial 5.3: Set Up Quixel Bridge 


Step 1: Download and install Quixel Bridge. Go to 
https://quixel.com, and click the IGN IN button 
at the upper nght comer of the webpage. In 
the pop-up SIGN IN window, click on SGN IN 
WITH EPIC GAMES. Log in with your Epic Games 
account. After logging in, scroll down, f nd 
BRIDGE, and click on it (Figure 5.63). 

dick the DOWNLOAD FOR FREE button to 
download Quixel Bridge, install, and open it after 
downloading. Cick on the IGN IN button at the 
top nght comer and sign in with your Epic Game 
account again. 

Step 2: Download our f rst asset. Go back to Unreal 
Engine, Press the Save All button in the Content 
Browser, and Close Unreal Engine After saving. 
Go to Quixel Bridge, click on the button with a 
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sphere icon on theleft side of the UI, and choose 
Environment Natural > Nordic Forest. 

The Nordic Forest isa collection of assets they 
scanned in the forests around Denmark, Norway, 
and Sweden. These forests have overgrown 
vegetation and complex and wet landscapes. 
Therearemany assets in the middle section 

of the UI. Scroll down until you f nd Mossy 
Ground, select it, and hit the DOWNLOAD button 
(Figure 5.64). 


Mossy Ground 


ASSET INFO 
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Step 3: Export to Unreal. Go to the EXPORT SETTINGS 
tab, set the Texture Resolution to 2k, set the 
Texture Format to TGA, and se the Export To to 
Unreal Engine. Set the Engine Version to your 
Unreal Engine version. Cick on the Installation 
Folder. In the pop-up Select Folder window, f nd 
your Unreal Engine Directory, and thisis your 
engine installation path; in the default settings, it 
shoulde be in: 

C:\Program Files Epic Games\UE_4.2x\Engina\ 
Plugins 

Once you set it up, the Quix Megascan plug-in 
Starts to get installed to Unreal Engine. 
Finally, set the project location to the path of 
your Unreal project. J ust to give an example, 
the project path of our book is: J \GamePns\ 
TheEscaper 

dick on the EXPORT button to export the asset to 
your Unreal project (Figure 5.65). 





Why? 


We chose to use 2k instead of 8k because the landscape Is 
outside, and the player will never reach there. Keeping it 
relatively low is going to save us performance. 


Step 4: Download the Swamp Soil material. After 
f nishing exporting, a notif cation pops up on the 
upper right comer that tells you it has succeeded. 
Go back to Unreal Engine, and you can seethe 
material and its textures are now in the content 
browser. Find Swamp Soil in Quixel Bridge, 
download, and export it to our Unreal project the 
same way. 

Now wehave our Quixe assets in our project, 

let's moveon to the landscape material setup. 


Tutorial 5.4: Create the 
Landscape Material 


Step 1: Set up a matenal function for our landscape 
layering. We want both Mossy Ground and 
Swamp Soil on our landscape as two layers. To 
set up the material, we can create a material 
function that can represent each oneof themas 


226 





Mossy Ground 


PURCHASED 


EXPORT SETTINGS 


Texture Resolution 


Texture Format 


Export To @) Unreal Engine 
Engine Version 


Project Location 


RAF 565 BootsdtingfortheMosyGomnd 


a whole. Add a new folder to the Content folder 
in the Content Browser and name it Landscape. 
Go insidethe Landscape folder, right click, and 


saiect Materials & Textures > Maternal Function. 


Namethe new material function Landscape _ 
layer_MF (Figure 5.66). 
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Material Function 


You can think of a material function as a custom node that 
we can build and use in the Matenal Editor. J ust like the 
Multiply node and the Desaturate node we used earlier, 

a material function has certain functionalities, and it has 
inputs and outputs. In the next few steps, we are going to 
use the material function to help simplify the graph of the 
blending of the mossy ground and swamp soil material. 


Step 2: Create a base color input for our material 
function. Doubleclick to open Landscape _ 
layer MF. The Material Function Editor pops 
up. This Material Function Editor behaves 
just likethe Material Editor. Right click in the 
Matenal Function Editor, search, and create 
a MakeMatenalAttnibutes node. Connect the 
output pin of the MakeMatenalAttnbutes node 
to the input of the Output Result node. Create 
a Function Input node by nght clicking and 
search for it. In the Details pane, set the Input 
Nameto BaseColor and connect the output 
of BaseColor to the BaseColor input of the 
MakeMatenalAttnbutes node (Figure 5.67). 

Step 3: Create other color inputs. Go to the 
Megascans— Surfaces > Mossy Ground 00 
folder (created when exporting the materials 
from Quixe Bridge) in the Content Browser. You 
can seethat there are six textures. Thetextures 
wedo not need arethbjbhpr_2k Displacenent 
and thbjbhpr_2K Bump. The displacement map 
isfor displacing the shape of the surface out, 
and only super high-end hardware usethis map. 
The bump map Isa legacy way of representing 
Surface details and isno longer needed. Create 
three more Function Input node for our material 
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function and namethen according to the 
textures we need to use: Normal, Roughness, and 
AO. Connect themto the corresponding inputs of 
the MakeMaterialAttri butes node (Figure 5.68). 
Press the Save button to saveour material 
function. 

Step 4: Create the landscape material. Go backto the 
Landscape folder. Right click and sdlect Material, 
namethe new material Landscape Base Mtl, 
and double click to open it. Drag our Landscape _ 
layer_MF fromthe Content Browser to the graph 
of the Landscape Base Mtl in the Material 
editor. You can seethat our material function 
does becomea node that has four inputs. These 
four inputs are the inputs we set up in Steps 6 
and 7. Go back to the Mossy Ground _OOfolder 
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and drag the corresponding four textures to the 
graph and connect themto the four inputs of 
the Landscape _layer MF node (Albedo is for 
the BaseColor input). Select the Landscape __ 
Base Mtl node, and in the Details panel, check 
on the Use Material Attributes option in the 
Material section. The Landscape Base Mtl now 
collapsed to only having one input. Connect 

the output of the Landscape layer MF tothe 
input of the Landscape _Base_ Mtl. We should 
now seethat the moss material appears in the 
material preview window at the upper left comer 
(Figure 5.69). 
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Step 5: Createthe Swamp_ Soil layer and set up 
blending. Drag in another Landscape_layer_ MF 
to thegraph. Go to the Svamp Soild OOfolder, 
drag the Albedo, AO, Normal, and Roughness 
textures for the swamp soil material to the 
graph, and connect themto the new Landscape __ 
layer MF. Create a LandscapeLayerBlend node. 
Go to the Details pand. dick the “+’ button in 
the Layers settings twiceto createtwo layers. 
Cick on thetnangle icon to open thesetwo 
layers, changethe Layer Name of thef rst layer 
to moss, and the second oneto soil. Connect 
thef rst Landscape layer MF to the Layer 
Moss input pin of the Layer Blend node and 
the second Landscape _layer MF tothe Layer 
Soil input pin of the Layer Blend node. Finally, 
connect the output of the Layer Blend nodeto 
the Landscape Base Mtl (Figure 5.70). Pressthe 
Save button to savethe material. 

Step 6: Set up the landscape. Go back to the 
Landscapefolder. Right click on the Landscape _ 
Base_Mitl and sect Create Material Instance. 


231 


Catin Gareswith Urad Engine Suostene Parte, &Maa 


ape Layer Blend 
iMoss =] 
S 
res) 


N UE 





AGLRE 5.70 Sduptrelagingdtrewolackarpelaes 


232 


Select the landscape in the level and drag 
thenew matenal instanceto the Landscape 
Material slot In the Details panel to assign it to 
the landscape. A notif cation pops up with the 
text Compiling Shaders, and give it sometime 
to f nish the compilation. The landscape is now 
black. Press Shift +3 to switch to landscape 
mode, in the Mode pane, click on the Paint 
button to go to landscape painting mode. 

In the layers section, we should now see our 
Moss and Soil layer (the layer we def ned inthe 
LandscapeLayerBlend node). Click the “+’ button 
of the Moss layer and select the Weight- Blended 
layer (normal). In the pop-up window, select the 
landscape folder and hit OK. Do the same thing 
to the Soil layer. The landscape now should show 
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the Moss material repeating on it (Figure 5.71). 
Unreal Engine starts to compile shaders again, 
and give it enough timeto f nish. 


Step 7: Paint the layer distributions. We want most of 


the area to besoil, nght click on the Soil layer in 
the Mode pang, and select Fill layer. Click on the 
Moss layer, and start painting on thelandscape 
to add mossto the surface. The moss should 
happen on some of the slopes. Weare going 

to throw many props and foliagesto cover the 
landscape, so we do not haveto carefully paint it 
(Figure 5.72). 


Step 8: Set up tiling controls. Onething wecan 


noticehereis both thesoil and themoss are 
visibly repeating. Go to the Landscape folder, 
and double click Landscape _Base_ Mtl to open 
it. Create a LandscapeLayerCoords node. The 
LandscapeLayerCoords gives the UV of the 
landscape. The UV of the landscape maps to 
individual small components of the landscape, 
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and we need to referenceit f rst before making 
any additional adjustments. Add a Multiply node 
and a ScalarParamater node, and connect the 
LandscapeLayerCoords to theA input pin of the 
Multiply node. Renamethe ScalarParamater 
nodeto Mossiiling and connect it to the B input 
pin of the Multiply node. Set the default value of 
the Mosshiling to 1. Connect the Multiply node 
to the UMS input pins of all four Texture Samples 
of the Mosslayer. Do the same thing to thesoil 
layer (Figure 5.73). Pressthe Save button to 

save it. Another round of shader compiling got 
triggered, and give it timeto f nish. 


Step 9: Tweak thetiling of thelayers. Open LandScape _ 


Base Mtl Inst. Toggleon MossTiling and SoilTiling, 
and set ther values smaller than oneto havelesser 
tiling. Thevalueweset hereis 0.3 forthe Mossliling 
and 0.1 forthe SoilTiling (Figure 5. 74). 

Once weare happy with our landscape 
moda, wecan moveon to populate more assets. 


Tutorial 5.5: Place 3D Assets 
on the Landscape 
Step 1: Megascan assets. Go back to Quixel Bridge. 


In our NORDIC FOREST collection, f nd and 
download some 3D assets, export them to our 
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project. The process of downloading them isthe 
same we did for the moss. Wedo not haveto set 
up the EXPORT SETTINGS anymore. Figure 5.75 
shows the selection of the assets we chose to use 
In our exterior scene. 


Step 2: Filtering assets. Go to the 3D_ Assets folder 


in the Megascans folder. Click on the Filters 
button on the side of the search bar and check 
on Static Mesh. All 3D modas we downloaded 
now appear below. Thisf Iter option isa 

fast way to get a specif c type of asset listed 
(Figure 5.76). 


Step 3: Place Megascan assets. You can now drag 


and drop these assets into the level. You can 
move, rotate, and scalethe assets as long asthey 
makesense. The purpose of placing these assets 
to block any artifacts we have on the exterior of 
our building and add an illusion of inf nite nature 
environment around the building. Feel freeto 
placethese assets in whatever way you seef t. 
Figure 5.77 snows the result. 


Step 3: Create an asset transferer project. Before 


moving on to get more assets in, you are 

probably already noticing that you could have 
downloaded some asset that you end up not 
using. These not-used assets are only making 
your project bigger. Create a new Unreal Engine 
project using the same steps and setting we 
used while creating our current one, and give 
this new project a name: AssetTransferer. Anew 
Unreal Editor opens and let’s keep it open 

in the background. Weare going to usethis 
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AssetTransferer as a receiver of new assets. After 
checking the assets out, wethen decide if we 
transfer any of themto our TheEscaper project. 
Step 4: Get free assets in the marketplace. We still 
need some actual trees. Another way to get free 
asset isin the Unreal Marketplace. Open Epic 
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Game Launcher, and click the Unreal Engine 
section and then the Marketplace section. Type 
in temperate Vegetation: Spruce Forest in the 
search bar at the upper right comer. Only one 
asset shows up in the search result, and this one 
isthefreetree assets we are going to use. Cick 
on thetemperate Vegetation: Spruce Forest to go 
into the details of this asset, and click on the Free 
button at the lower right comer to get it for free. 
Oncedone, the Free button becomes an Add to 
Project button. Click on it. In the pop-up window, 
saect our AssetTransferer project and click on the 
Add to Project button (Figure 5.78). Epic Game 
Launcher needs sometimeto download the 
assets; oncef nished downloading, it adds the 
assets to our AssetTransferer. 


Why? 


When downloading, you can see that the size of the 
temperate Vegetation: Spruce Forest asset is around 

8 GB. The size of the package is way bigger than what 

we already have in our project. There are many trees and 
other foliages in this package, and we only need a fraction 
of them. Having it added to our AssetTransferer project 
allows us to pick only a few models in it and transfer only 
these models to our TheEscaper project. 
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Step 5: Transfer trees to our TheEscape 
project. Go to the new AssetTransferer 
project, and you can seea new folder 
called PN_ interactiveSoruceForest that 
appears in the Content Browser. Go to PN_ 
InteractiveSpruceForest > Meshes > half > 
low, there are four trees in it. If the editor is 
busy compiling shaders, give it sometime to 
do that. Select both the soruce_half_02_low 
and the spruce _half 03 low, right click on 
any one of them, and select Asset Actions > 
Migrate (Figure 5.79). A window pops up 
that shows all the dependencies of these 
two trees. Click the OK button, in the new 
pop-up f le explorer window, navigateto the 
directory of the content browser folder of our 
Theéscaper project (Figure 5.80), and click 
the Select Folder button. The two trees are 
now getting transferred to our TheEscaper 
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project, and it only takes a few seconds. A 
notif cation at the lower right comer pops up 
oncethe enginef nished the migration. Using 
thesame method, go ahead and migratethe 
spruce_small 02 and spruce small O5inthe 
PN_interactiveSopruceForest > Meshes small 
folder to our TheEscaper project. A warming 
may pop up, saying that An asset already exists. 
Press the No All button to avoid copying them 
over again. These already existing assets arethe 
shared materials that got imported already. 

Step 6: Set up the foliages to paint. Go back to our 
Theéscaper project. Press Shift +4 to go to the 
foliage mode. You can also switch to this mode 
by going to the Modes Pang and dick on the 
foliage button on thenght of the landscape 
button. In the Content Browser, click on the 
PN_interactiveSpruceForest folder and toggle 
on the Static Mesh f Iter. Drag the four tree assets 
we migrated over to the enpty soace under the 
green Add Foliage Type button. The four trees 
are now added to the list of foliages we can paint 
over any surface (Figure 5.81). 
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Step 7: Adjust foliage settings. Click and drag on 
theterrain or any other mode to placetrees 
thereas foliage. The default result is too much. 
Cick on thef rst treein the paint list. Go to the 
settings below thelist and set the Density/iKuu 
to 1 instead of 100 to reduceits paint density. 
Check of the Align to Normal setting. Wealso 
want to paint onetypeof treeevery time. Hover 
the cursor on all other threetrees and click on the 
checker box on the upper left comer of their icon 
to deactivatethem. The icons of the deactivated 
foliages are darkened. Start painting again 
on theterain to place only onetreeat a time 
(Figure 5.82). 
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Why? 


Checking of the Align to Normal setting makes all the 
trees completely vertical, and for tall trees with straight 
trunks, it would be strange if they are titled. 


Step 8: Placing moretrees. Once you are happy with 
thef rst tree, you can deactivate it and toggleon 
thesecond tree. Set the density of the second tree 
and start placing it. Do the sameto all other trees 
until you havea decent amount of trees placed 
(Figure 5.83). 

Step 9: Adjust the trees. If you don’t like one of the 
trees painted, click on the select button in the 
Moda pana and click on anytreeto select it. 
Oncea tree isselected, you can move, rotate, 
scale, or delete it. Adjust thetrees with the sdect 
to have more vanationson size and deletethe 
ones you don’t want (Figure 5.84). 

We have now f nished our entire scene 
assembly. 
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Conclusion 


Environment creation is always considered the most time- 
consuming process of game production. No matter how 
big your team is, or it is just yourself, you are going to have 
to work on the environment for the longest time. Luckily, 
there are many free assets like Quixel Megascan and 

the Unreal Marketplace. Leverage these free assets can 
save a tremendous amount of time. Doing environment 
creation is both challenging and exciting. There are many 
possibilities, variations in the creation of an environment, 
and you can always feel fresh while working as an 
environment artist. 


Let’s move on to the next chapter, where we start lighting, 
baking, and tweak the graphic of the level. 





Lighting and Baking 





Lighting is a powerful tool; it drastically changes the 
appeal and perception of the scene. When done right, 

it enhances the mood, experience, and clarity of the 
game. When done poorly, the game becomes misleading, 
inconsistent, and distracting. In this chapter, we are going 
to tackle the lighting and baking of our games. We already 
have sunlight in the scene, and we have built some light 
actors, but we haven't tweak them in any way. 


Baking 


Baking is the process of rendering and storing lighting 
information. The stored lighting information is used 
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instead of calculating all aspects of lighting in realtime. 
The most common one is to render the lighting 
information as a grayscale map, multiplied on top of 

the model's base color texture. As shown in Figure 6.1, 
rendering a cube sitting on a plane takes around 

10 seconds with mediun-quality settings in Arnold 
Renderer (a professional renderer for movie production). 
Rendering a high-quality rock with lots of polygons and 
multiple textures take 2 minutes in the same renderer. 
Rendering 10 seconds or 2 minutes for one frame isf ne 
for rendering an animation, but not practical for games. To 
reach the same quality, we bake the lighting information 
as grayscale textures and multiply these grayscale colors 
on top of their base color. By using baked lighting, we do 
not have to calculate the lighting in realtime. However, 
baked lighting does not support movable objects. 


Lightmaps 


The baked lighting information is called lightmap. The 
maps in the middle of Figure 6.1 are all lightmaps. 


Lightmap UV 


Lightmap may use a dif erent set of UVs for optimization. 
Consider that all the f oor pieces of our level share the 
same UV set, the UVs of the f oors f oor 01 only take a 
small part of the UV space, and the other parts are empty. 
Using this kind of UV is wasting all the empty areas of the 
UV space. Go to the Content browser, f nd f oors f oor 01, 
and double click to open it. In the Asset Editor, click on the 
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UV button and select UV Channel 0. The UVs of the model 
now appear at the lower left corner of the Editor. This UV 
is the f rst UV channel that all the textures are using in the 
material. However, there is also a UV Channel 1 option. 
Click on the UV icon again and choose UV Channel 1 this 
time. A dif erent UV layout shows up, and this one has 
bigger UV islands. This UV Channel 1 is used for baking 
and applying lightmaps. A model can have multiple UV 
Channels; UV Channel 0 is almost always for textures. 
Other UV Channels can be used for any other purposes 
like baking and mapping lightmaps (Figure 6.2). 


Lightmap Resolution 


In the Details panel of the Asset Editor, go to LOD 0 and 
open the Build Settings section. Set the Min Lightmap 
Resolution from 64 to 128 and press the Apply Changes. 
This setting tells Unreal Engine that the lowest lightmap 
resolution we are going to build for this asset is 128 x128 
pixels. 128 x128 may seem low, but there is very little 
information in lighting compared to a color map. After 
changing it, the UV Channel 1 also changes, leaving 
smaller gaps between shells. Since the texture becomes 
bigger than before, the smaller gaps still contain the same 
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number of pixels. To change the resolution for the actual 
lightmap, scroll down to the General Settings section 
and set the Light Map Resolution value to 128 as well 
(Figure 6.3). 
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Lightmap Density 


Press the Alt +0 button to switch to lightmap density 
viewing mode. The models are now color-coded with 
gride textures applied to them. This viewing mode shows 
the resolution of the lightmaps. Green color means ideal 
texel density, blue means the resolution is too low, and 
red means it’s too high. This is not your texel density 

for the textures, but the baked lightmap that uses UV 
channel 1. It is not always necessary to make them all 
green. But we can spend some time to f x some extreme 
ones before we start baking. Press Alt +4 to go back to 
the Lit viewing mode, which is the normal viewing mode. 
These toggles can also be found in the drop-down menu 
on the upper left comer of the viewport. 


Volumetric Lightmaps 


Other than the 2D lightmaps we talked about earlier, 
there is also Volumetric Lightmap. Volumetric Lightmap 

is a matrix of sample points in the 3D space. Every point 
has baked information about the lighting of where that 
point is. It is the light probs of Unity if you are familiar 
with that. Figure 6.4 visualizes the Volumetric Lightmap. 
Every sphere in Figure 6.4 is a point we have talked about. 
Notice how some of the spheres have red tint at their 
lower comers, and the red color is from the bouncing red 
light of the point light. Go to the Show menu at the upper 
left corner of the viewport, f nd Visualize > Volumetric 
Lightmap, and check it on to visualize the Volumetric 
Lightmap just like Figure 6.4. 
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Mobility 


Some actors are static, and their lighting can be all baked. 
Some other actors are moving during gameplay, like the 
player character or sliding doors. Baked lightmap does not 
work for them. Actors and lights have mobility settings 
that allow us to def ne how their lighting is calculated. 


Select any model and go to the mobility section in the 
Details panel, and you can see that there are three options: 


Static— The actor cannot move or update in any way. 
All lighting aspects from static and stationary lights 
are baked. All lighting aspects from movable lights are 
calculated in realtime. 


Movable— The actor can move freely. Lighting from 
static lights only queries the baked Volumetric Lightmap, 
and no shadow is cast. Direct lighting and shadow 

from stationary lights are all calculated in realtime, 
indirect lighting from stationary lights queries the baked 
Volumetric Lightmap. All lighting aspects from movable 
lights are calculated in realtime. 


Stationary— Same as Moveable, but cannot move in 
gameplay (can be moved when editing the level in the 
editor without rebaking). The shadow from movable lights 
is using the shadow of the previous frame if the light is not 
changed. 


Lights also have the same mobility settings: 


Static— The light is not changing in any way. It contributes 
to lightmap baking. Its lighting is baked as lightmaps for 
static meshes. Movable and Stationary meshes only query 
its baked Volumetric Lightmap and do not cast shadows 
fromit. 


Movable— Light can change freely and does not 
contribute to lightmap baking. Its lighting is calculated in 
realtime for all meshes. They are performance-intensive if 
they cast shadows. 


Stationary— Light cannot be moved, but other aspects 
can be changed, like color, intensity, but not softness. 
Stationary lights contribute to lightmap baking. 





For Movable and Stationary Actors, direct lighting and 
Shadow are calculated in realtime and indirect lighting 
queries baked Volumetric Light Map. All lighting aspects 
from stationary lights are baked for static meshes. 


It isin the author's opinion that all these lighting 
complexities are destined to disappear when computer 
hardware is getting better in the future. For now, all of 
the lights we have created in Chapter 4 are stationary. 
Stationary lights have the perfect balance between 
performance and quality. They are also suitable for 
meshes with any mobility settings. 


Now we have explained the foundations of lighting in 
Unreal Engine, let’s move on to optimize the lightmap 
resolutions of the models. 


Tutorial 6.1: Optimize the 
Lightmap Resolution 


Step 1: Optimize interior lightmap texel density. 
Open our Leva OL Awaken level. Press Alt +0 
to toggle on Lightmap Density view mode. 
Select any interior moda that is blue and press 
Ctrl +Eto open it in the Asset Editor. Open the 
Build Setting section under the LOD 0 section, set 
the Min Lightmap Resolution setting to double 
the current value, and press the Apply Changes 
button. Under the General Settings, set the Light 
Map Resolution to thesamevalueas the Min 
Lightmap Resolution. Press the Save button. 

Go back to the viewport and check if 
the moda now becomes green (just has to 
be close enough), if not, repeat the same 
process. Do not crank the resolution values 
higher than 512. For anything red, instead of 
doubling Min Lightmap Resolution and the 
Light Map Resolution, lower down the values 
by half. Keep doing this until all modas in the 
Interior are green (does not haveto be exact). 
Thereare modas scaled dif erently (pipes, 
boxes). Stick with one value in the Asset 
Editor. Select the ones that need tweaking 
in theleva, go to the Details panel, open the 
Lighting section, check on Ovemidden Light 
Map Res, and adjust it here. The Overidden 
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Light Map Res overrides the settings in the 
Asset Editor for the instances you are selecting 
intheleve (Figure 6.5). 


Tips and Tricks 


The best approach to lightmap resolution is not making 
everything green. We can break up the scene to three 
levels of resolutions: 


1. Playable Area—the area that the player can reach 
as close as possible, make all models green. You 
can also make complicated models or models that 
may receive more complicated shadows redder. 

2. Middle Ground—the area that the player cannot 
reach, but reasonably close, make these models 
lesser green or blue. 

3. Background—the area that is too far, make them 


all blue. 
Step 2: Optimize landscape lightmap texel density. 
Select the landscape. Go to the Details pane. 
Set the Static Lighting Resolution to 16 under the 
Lighting section (Figure 6.6). 


Why? 


The landscape may still appear to be blue. However, it is 

a vast area and will take along time to bake if we make it 
green; also, the player cannot reach it, so it is considered 
middle ground. 
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Step 3: Fixthetrees. Thetwo tall trees (spruce _ 
half_02 low, soruce_half_03 low) weareusing 
havef ve LODs. LOD stands for level of details, 
a mode with multiple LODs means that there 
are multiple versions of this moda, each with 
dif erent level of details (dif erent polycounts). 
Unreal Engineloads dif erent models based on 
how closethe camera (player) isto the modd. 
This way, Unreal can load a lower version of the 
moda when it isfar away to save performance. 

Thef rst four LODs of the trees all have 
three UV channes, and the UV Channd 2 is 
for the lightmap. However, the last LODs of 
thesetwo trees have no UV Chand 2, which 
causes Inconsistency and lightmap baking 
failure. Because we do not havethe onginal 
modes, the easiest way to make it work isto 
delete the last LODs of thetwo trees. 

Open spruce _half_02_low in the Asset 
Editor. In the Details channa, f nd the LOD 
Setting section, change the Number of 
LODs from5 to 4, and hit the Apply Changes 
button; this deletes the last LOD. Go to the 
General Settings section and set the Light 
Map Coordinate Indexto 2. Do the same 
thing to soruce_half_03 low. Thetwo tall 
trees should have grids appear now on their 
surface in the Lightmap Density viewing 
mode after our f x (Figure 6. 7). 
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Step 4: Adjust exterior lightmap resolution. Because 
thetrees are not directly reachable, we can make 
thema bit morebluish. Forthe other two foliages 
spruce _small O02 and spruce small. 05, because 
they are morecloseto the windows, we have 
made them more green. Thelightmap resolution 
we used for all of these foliages is 256. For all 
other rocks, we also makethen more bluish. 
Figure 6.8 shows how the extenor looks likein 


theLightmap Density viewing mode. 


After optimizing the lightmap resolution, we can now 
move on to place lightmass importance volumes. 


\ 
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Lightmass Importance Volumes 


Lightmass Importance Volumes are box volumes. When 
building lightmaps, Unreal Engine pays more attention 
inside these box volumes and creates more samples 

to bake these areas more accurately. Go to the Mode 
panel, and search for Lightmass Importance Volume; 
there should be only one result in the list. Drag the 
Lightmass Importance Volume to the level, move, and 
scale it to make it cover the starting room and the hallway 
connected to it. Drag out afew more copies of the 
Lightmass Importance Volume until the volumes cover all 
the playable area. It is ok to overlap the boxes (Figure 6.9). 


We have a few lights added in when building our level, 
and there is a BP_ceiling_light_02 above every door, some 
of the hallways and rooms have ceiling lights also. We do 
not know how they feel like until we build the lighting, 
but we can expect them to work f ne since we have tested 
them in our Test_ Level while making them (Figure 4.57). 


Lower Down Baking Quality 
for Quick Iteration 


To test our lighting fast, we can globally lower down 

the lightmap resolution. Go to Build > Lighting info > 
LightMap Resolution Adjustment, check on Static Meshes 
and BSP Surfaces, and set Ratio to 20. Our baking now 
only bakes one-f fth of the lightmap resolution we have 
def ned, which makes the render time faster (Figure 6.10). 
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We can also lower down the baking quality. Go to the 
Details panel, and click on the World Settings tab on 
the right side of the Details tab to switch to the World 
Setting panel. Open the Lightmass settings, and set the 
Static Lighting Level Scale to 2 and Indirect Lighting 
Quality to 0.5. 


The Static Lighting Level Scale determines how many 
Unreal units equal 1cm when baking. A value of 2 means 
2 Unreal units is 1cm, which makes our scene smaller and 
the baking time faster. 


We also lower the Indirect Lighting Quality to 0.5 to make 
the baking faster (Figure 6.11). 


Press Ctrl +Shift + to build the lighting. 


® Details ® World Settings 


Search Details 
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The baking takes 10 minutes with our setting with an Intel(R) 
Core(TM) 17-6700K. This CPU is four generations behind the 
current core i7. Figure 6.12 shows the baking result. 


Let’s move on to adjusting and adding new lights to make 
the level look better than now. 


Tips and Tricks 


The more iterations we can make, the better our result 
could be. Reducing baking time is crucial to allow us to 
experiment with dif erent lighting setups. 
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Tutorial 6.2: Adjust Lighting 


Step 1: Adjust light intensity and color globally. We 
can all agreethat the environment isa little dark. 
Select the BP_cailing_light_O1inthestarting 
roomand press Cin +Eto open it in the Blueprint 
editor. Select the SpotLight in the Components 
panal, go to the Details pana, and set the 
Intensity to 10,000. To makeit look unique, set 
the Light Color to a bluish color. To keep the light 
color and the color of the light bulbs consistent, 
we can set the Emissive color of the Calling _ 
light_O1_light_mtl to a bluecolor also. For the 
other two lights, the light intensity of the BP _ 
calling_light_O2 is cranked up to 3000, and the 
light color is slightly warmer. The light intensity 
of the BP_lights f oor light is now 2048, and 
the color is also a bit bluish. All the adjustments 
wedid here should af ect all the lightsin the 
level (Figure 6.13). Fea freeto adjust your lights 
dif erently to f t your needs and taste. 

Step 2: Place more lights. The camera roomand the 
security camera hallway aretoo dark, so place 
morelightsto help some of the darker areas. 
Figure 6.14 shows some of the new lights added. 
Feel freeto add more light in other areas that you 
think need more lighting. 

Step 3: Tweak the materials. The crates appear 
to betoo dark. To adjust the brightness of the 
color, wehaveto make some changes to our 
base material. Open the Substance Base Mtl, 
hold down the M button on the keyboard, and 
click to add a Multiply node. Hold down the V 
button and click to add a Vector parameter, 
name this Vector parameter ColorMult, and set 
its Default Valueto white in the Details pand. 
Connect the Desaturation nodeto theA input 
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pin of the Multiply node. Connect the Color 
output pin of the ColorMult nodeto the B input 
of the Multiply node, and connect the output 
pin of the Multiply nodeto the Base Color of 
the Substance _Base_Mtl node. Pressthe Save 
button to savethe change. Wenow havea new 
ColorMult parameter that we can useto multiply 
the color of the material. Open the Box_ 2K 
material instance in the boxes folder. Check on 
the ColorMult, click on the black color band to 
pull out the Color Picker, and set the V valueto 4 
to brighten the color of the boxes (Figure 6.15). 
Thesaturation of the wallsis also too 
intrusive. Tof x it, wecan set the Desaturation 
parameter of the Substance Base Mtl Instto 0.3. 
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Step 4: Fix overlapping light limits. If you check every 
Individual light, you can seethat someof them 
are having a red cross on them (Figure 6.16). 

The red cross means that the light has morethan 
two lights overlapping with it, and this isthe 
technical limitation of lights with stationary 
mobility. Wehavetwo solutions here: 


1. All of our lights are set to stationary to suit both 
Static meshes and our movable character later. 
However, we do not need all the lights to be 
stationary. Select any light that has a red cross, 
select its light component in the Details panel, 
and set the Mobility to static. Because static light 
does not cast shadows for movable objects, this 
option is suitable for areas that this light is not a 
primary light for moveable actors. The lights in the 
hallways are f xed this way (Figure 6.17). 

2. Reduce the reach of the lights, so they are not 
overlapping each other. For all the lights in Unreal 
Engine, there is an Attenuation Radius setting. 
Attenuation Radius artif cially limits the reach of 
the light. In Figure 6.18, the Attenuation Radius 
of the PointLight is reduced to 500 to avoid 
overlapping with too many other lights. The bright 
spherical wireframe indicates the furthest reach of 
the light. This option is preferred if you need this 
light to contribute detailed lighting and shadow 
to moveable actors. In this case, we want the light 
to help lit the hero asset, which is going to be 
moving in the future. 
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Only change thelight to movable if none 
of thetwo options works. 

Step 5: Setup mobility for the moveable objects. The 
doors and the hero asset aregoing to move in 
thefuture. Select the mode's of the doors and the 
hero asset, go to the Details pana, and set their 
Mobilityto Moveable. 

Step 6: Adjust Ref ection captures. We have covered 
ref ection captures already. Makesurethat there 
are enough ref ection captures to cover dif erent 
areas. Figure 6.19 shows how every pot in the 
boss roomhasa ref ection captureto help get 
better ref ections. The security camera hallway 
istoo long, and multiple ref ection captures are 
used there. 

Step 7: Build another test lighting. We have made 
enough changes here, press Ctl +Shift + to build 
lighting again to seethe dif erence. Figure 6.20 
shows the screenshots of the test result. 

Step 8: More ref nement. Please soend moretime 
ref ning thelighting until you arehappy with 


everything. 
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Step 9: Final baking. Once you are happy with the 


lighting test, click the drop-down arrow on the 
nght of the Build button and select Lighting 
Quality > Production. In thesamedrop- 
down menu, select Lighting Info > LightMap 
Resolution Adjustment. Set the Ratio back to 
100, make sure that the Static Meshes and BSP 
Surfaces are checked, and select Options to 
Current Level. Finally, go to the World Setting 
panel, and set the Matic Lighting Level Scaleto 
0.25, NumIndirect Lighting Bounces to 4, Num 
Sky Lighting Bounces to 3, and Indirect Lighting 
Quality to 3 (Figure 6.21). Press Gn +Shift + one 
moretimeto start baking. This baking is going 
to takea long time (12 hours with our 6-Gen Inta 
corei7/). 

Thef nal baking result is shown in Figure 6.22. 

Our lighting and baking aredone, but there 
are more teps wecan taketo enhancethe 
graphics further. Let's explorethese extra steps. 


Tutorial 6.3: Add Post 
Processing and Other Ef ects 


Step 1: Add exponential height fog. For our forest 


environment, some haze or fog would exist. 

Go to the Mode pana and search for fog and 
drag Exponential Height Fog to thelevd. This 
Exponential Haght Fog becomesthinner when 
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it’shigher. Thefog appears to betoo strong; so, 
go to the Details panel and set the Fog Density to 
0.005 to make it thinner. 

Step 2: Add Post Process Volume. Go to the Mode 
panel and search for Post Process Volume. Drag 
the Post Process Volumeto the hallway. In the 
Details panel, go to the Post Process Volume 
Settings section and check on Inf nite Extent 
(Unbound). This allows it to af ect the whole 
world. 





Post Process Volume 


The Post Process Volume allows us to adjust many aspects 
of the f nal image, which gives the artists more control 
over the graphics. We can adjust the Lens ef ect, Color 
Grading, and add other rendering features like Screen 
Space Ambient Occlusion. Keep in mind though, Post 
Process Volume is not supposed to be used to f x any 
lighting problems. If the environment is too dark, you 
crank up the intensity of the lights. 


Step 3: Add Vignette. Vignetteis an ef ect that 
darkens the edge of the image. Compostionally, 
it helps to guidethe eyeto look at the center 
of theimage. With the Post Process Volume 
selected, go to the Lens section, open the Image 
Ef ects, and check on Vignette Intensity. Set the 
value of the Vignette Intensity to 0.5 to createa 
very subtle vignette ef ect. 

Step 4: Adjust Contrast and Saturation. Go to the 
Color Grading section. Under the global section, 
check on Saturation and Contrast. To makethe 
image sharper, open the Contrast section and 
set the Slider valueto 11 under the color whed. 
Higher contrast makes the colors more saturated; 
So, open the Saturation section and set the sider 
value under the color whed to 0.8 to f xthe 
saturation (Figure 6.23). 

Step 5: Add Ambient Occlusion. Go to the Rendering 
Features section, open the Ambient Occlusion 
section, and check on Intensity and Radius. Drag 
the Intensity value up to 1 Wehavetalked about 
Ambient Occlusion (AO) already in Chapter 3. 
AO means thesamething here. Adding AO 
enhances the detail of the models and adds 
weight to them. 
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Assignment 


Now you have learned the dif erent aspects of lighting, 
it is now up to you to f ne-tune the lighting on our own. 
Please soend some time to tweak the number of lights 
you are having, adjust their intensity, and tweak their 
color. The Light Source directional light determines the 
sunlight. You can search for it in the world outliner, and 
you can rotate it to change the direction of the sun. 


Don't forget to experiment with post process volume also. 


The result we got is shown in Figure 6.24. 
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Conclusion 


Lighting the environment is truly fun, and if you enjoy 
experimenting, there is an inf nite amount of possibilities. 
One thing to always keep in mind is to save performance, 
and we need to reduce the number of lights if possible. In 
terms of current generation computer graphics, it is not 
the polycount that slows down the performance, but the 
complicity of lighting and shaders. It is also super helpful 
to leam composition and lighting techniques, so you have 
good art guidance when trying dif erent lighting ideas. 


We are still dealing with cold metals or dead stuf ; let’s 
move on to the next chapter where we start making our 
character. 








Hello, and welcome to the character modeling chapter! 
Character is always one of the critical aspects of a game. It 
may not take alot of screen space, but it is what the player 
looks at for along time; it is also what the players imagine 
as themselves. Therefore, developing a compelling 
character is an essential task of production. 


Making characters requires dedication and patience so 
that every little detail is thought through and perfect. To 
keep the scope of this book suitable for all types of games, 
we will develop a full-body character that can f t into 

any camera placement. We will also ensure that it can be 
rigged and animated fully. 
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Concept Art 


Concept art is one of the most critical steps of character 
development and should never be overlooked. The 

back story, environment, occupation, and all other parts 
of acharacter are thought through before the visual is 
touched. Visual appearance also takes many iterations to 
achieve the desired result. Our concept here is Ellen Mara. 
She is one of the genetic clones of a mindless killing army 
but somehow becomes self-aware and want to escape 
from fate. The design we settled on is shown in Figure 7.1. 


Style Sheets 


It is critical to have a clean style sheet that lays out the 
full character, and it is more practical to avoid fancy 
Shading and use clear lines to represent the shapes. It is 
also essential to have dif erent views of the character to 
match each other accurately. For example, the bottom of 
the chin should be in the same location in both the front 
and side view. There are two dif erent poses we can model 
our character in: T pose and A pose. T pose has the arms 
straight, while A pose has the arms down naturally. We 
choose A pose for a better def nition of the shape of the 
shoulder. Otherwise, the shoulder of the character in a 
natural pose has to be def ned by ngging. 
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Workf ow 


Through the years of development, the workf ow to make 
a character has changed a lot. The modem workf ow 
mostly has a sculpting software called ZBrush involved. 
However, to limit the amount of software and the cost 

to follow this book, we are going for a more traditional 
approach - box modeling. Box modeling may not be the 
State-of-the-art workf ow, but it is the best practice to 
teach topology, which is technically critical for rigging and 
animation. On the other hand, it is also going to force the 
artist to think about big shapes and proportions f rst. 


Polycount 


Polycount is one of the f rst things to think about before 
start making the model. It is drastically dif erent based on 
the targeted platform, engine, and how many characters 
are going to appear on the screen. Polycount becomes 
lesser of a performance hit compared to the amount 

of lighting, shadowing, and textures, and we can safely 
assume an amount of 30k tris acceptable. This is not to say 
that we should reach 30k tris, f nding the right balance 
between quality and performance Is always needed. 


Setting Up Image Plane in Maya 


Step 1: Open a new Maya scene and save it as 
Hlen_Mara.mb. 

Step 2: Go to the front view, choose View-Amage 
Plane-Amport Image, and load Blen _S&yle_ 
Sheet_ Front.jpg. 

Step 3: Switch to the nght view, choose View->mage 
Plane-Amport Imageand load Blen Style_ 
Sheet_ Side jpg. 

Step 4: Create a cube, scale it up to 160 units, and 
move it up 80 units. Thesizeof the cube is 
roughly the size of our character. 

Step 5: Go to perspective view, select the two image 
planes, and scale and movethemup so that the 
size of the character is roughly the ze of the box. 

Step 6: Go back to the front view and select 
ImagePlanel in the outline. Move it so that 
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the front view of the character is aligned to the 
center of the gnd. 

Step 7: Switch to the nght view and select 
ImagePlanez2 in the outliner. Moveit so that the 
sideview of the character is aligned to the center 
of thegnd. 

Step 8: Go to the perspective view and deletethe 
cube. MovelmagePlanel away fromthe center 
onthe Zaxis and movelmagePlane2 away from 
the center on the X-axis (Figure 7.2). 


Why? 


The two image planes are references we need to get an 
accurate result. We are moving them away from the center 
to avoid clipping between our geometry and image 
planes. 


Step 9: Sdlect imagePlanel, press ctr +a to open the 
attribute editor. In the Image Plane Attributes 
section, changethe Display attribute to look 
through the camera. Do thesamething for 
ImagePlane2. 


Why? 


This step isto keep the perspective view clean, but it is 
optional. Some modelers may think having image planes 
visible in the perspective view is more helpful. 
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Eyeball 


Step 10: Create a polygon shere and renameit 
Hlen_|_ eye geo. Thissphereisgoing to bethe 
eyeball (Create->Polygon Primitives->Spohere). 

Step 11: Reduce eyeball polycount. Select Hlen_|_ 
eye geo, go to the channad box, under the 
INPUTS section, click polySoherel, and change 
the subdivision Axis and Subdivison Height 
to 16. 


Why? 


Although eyeball is important, our gamer is very unlikely 
to see it terribly close; reducing its polycount can help 
increase the frame rate in the game. Note that based on 
the type of the game, the subdivision level can very. 


Step 12: Fix eyetopology. Select the top center vertex 
of the eyeball (this isthe front of the eye), holding 
down Grrl, and then hit the delete button on the 
keyboard. We arenow nd of all thetnangles 
in thecenter. Switch to the Multi-Cut tool and 
connect the points to a grid-like topology 
(Figure 7.3). 


Why? 


Any vertex that has more than four edges connected is 
called a pole. Pole is notoriously bad for smooth shading, 
especially when it has a lot of lines connected to it. 
Because the eye is one of the most important parts of a 
character, we choose to recreate the topology of the front. 


Step 13: Fix curvature. Go to the front view, select the 
vertices of the top row, and holding down shift + 
right mouse button, in the marking menu, select 
Average Vertices. The Average Vertices command 
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AGE 75 Gedethecoreakuge 


averages the position of the selected vertices and 
give you some curvature. They are also collapsed 
down; usethe movetool to movethem back up. 
Repeat the Average Vertices and move operation 
until the eyeball is back to a spherical shape 
(Figure 7.4). 


Step 14: Add comea bulge. Switch back to the 


Why? 


perspective view. Select the vertex at the top 
center, holding down the B button to enablesoft 
sdection. Drag the left mouse button to make 
thefallof rangeroughly thesize of the comea. 
Use the movetool to move up just a little bit to 
create the form of the comea bulge (Figure 7.5). 


The shape of the eyeball is not exactly a ball. The comeal 
area is bulging out alittle bit more, mimicking the same 
shape that will help the refraction and highlight of the 


eyeball. 
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Step 15: Rotate the eyeball 90 degrees on the X-axis. 


Moveand scalethe eyeball until it matches the 
left eyeball in both thefront and side image 
planes (Figure 7.6). 


Step 16: Duplicatethe eyeball, name the new one 


Hlen_r_eye geo, hhangeitstransiate xfrom 
positive to negative (mine went from 3.938 to 
—3.938). 


Create the Eyelids 


Step 17: Make eyeball live. Select Hlen_|_ eye geo, 


go to the Status-Line and dick on the last 
Magnetic Icon. Our eyeball model is now 

live, when the geometry is live, any creation 

or movement will be snapped to its surface. 
Making the eyeball livehelps us to get the correct 
curvature of the eyelid. 


Step 18: Draw eyelid geometry. Press the number 


5 button on the keyboard to go to the solid 
Shading mode, in the viewport menu, select 
Shading->x-Ray to turn on X-Ray. With nothing 
selected, hold down the Shift button and the 
right mouse button, select the Quad Draw Tool. 
Go to the front view, click on the eyeball to the 
drop-down points; create four points and then 
holding down Shift and click in the middle 

of the four points to fill in a quad geometry 
(Figure 7.7). 


Step 19: Finish the eyelid loop. Createtwo more 


points and f Il another quad that connects to 
thef rst quad. Keep doing the samething until 
you get a loop wrapping around the contour of 
the eyed (Figure 7.8). You can drag any point or 
edgeto movethem, hold down Cin +Shift, and 
click on any point or edgeto deete them. 
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AGRE 78 Firishdaningthelagodttreadid 
Why? 


Quad Draw Tool is a re-topologizing tool that allows us to 
create the topology for any geometry. We use it to get the 
correct curvature of the eye. One important usage of this 





AGLRE 79 Degtheine care dtheadidfawad 


tool is to re-topologize a high-resolution model sculpted 
froma sculpting software like ZBrush, and we call that 
high to low workf ow. 


Step 20: Ref nethe eyelid shape. Tum of thelive 
object, switch to the Selection tool, and go to 
object mode. Movethe eyelid moda forward 
a little so there isa gap for the thickness of the 
eyelid. Go to sde view and drag Individual points 
to match the shapeto the contour of the eyed in 
the side view. 

Step 21: Ref nethe inner comer. Select the two 
endpoints of the inner comer; use Move, and soft 
Sdiection to drag the inner comer area forward 
(Figure 7.9). 


Why? 


Although the outer comer of the eyelid rests on the side 
of the eyeball, the inner comer does not. Underneath 
the inner comer of the eyelid, there are structures like 
caruncle and Papilla lacrimalis, which displace the inner 
eye comer forwards. That’s why we drag it forward. 


Step 22: Extrude the thickness of the eyelid. Go to 
edge mode, and doubleclick to sdect the inner 
edge loop of the eydid. Extrude the loop towards 
the eyeball, do another extrude to extend 
the inner surfaceto warp around the eyeball 
(Figure 7.10). 
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Step 23: Create the caruncle. Follow the steps shown 


in Figure 7.11 to createthecaruncle. 

Here, wef rst add an edgeloop inthe 
middle of the eyelid thickness face loop. 
Wethen select the top and bottom second 
faces fromthe inner comer and do a bridge 
face. After that, we saect theloop of the 
hole between the inner comer and the new 
bridged face and delete it. Wethen double 
click the resulting hole and do af Il hole 
command, don't forget tof Il the holeon the 
back as well. Finally, we add a horizontal 
edge loop to the new structure created, and 
movethe vettices to make it looks likea f at 
Oval shape. 
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Why? 


Step 23 seems to bea lot of work, but this part isa 
must-haveto make the eyes look good. Weare 
trying to achieve high-leve results here; fea free 
to skip this if you arenot trying to makea very 
detailed eye. 

Step 24: Round up thendge of the eyelid. Select the 
loop at thetuming edge of the upper eyelid that 
transitions from its front to its thickness, drag it 
up a little bit. Sect the sameloop of the lower 
eyelid and drag it down. Thisisto makethe 
correct curvature of thetranstion of the eyelids; 
see Figure 7.12 for detailed illustration. 

Step 25: Soften the normal. Go to object mode, make 
sure Hlen_body geo isselected, hold down 
Shift +right mouse button, and then choose 
Soften/ Harden Edges->Soften Edge. 


Why? 


We tend to limit our polycount, but we do not want to see 
hard polygon edges. Soften Edge command helps smooth 
out the shading between edges of the faces. 


Create the Eye Socket 


Step 26: Mark the edge of the eye socket. Sect 
the outer edge loop of the eyelid, extrudeout 
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another loop of faces, and move the vertices so 
that the new outer edge loop isat the edgeof the 
eye socket (Figure 7.13). 

Step 27: Eye socket Inter Detail. Add an edgeloop 
in the middle of the face loop extruded in the 
previous step, and tweak the vertices to giveita 
correct curvature (Figure 7.14). 

Step 28: Ref nethe inner structure. You can add 
moreloopsto any part around the eyeto support 
more detail. In our case, three more loops around 
the eyelid were added and tweaked to support 
the bottom edge of the lower eyelid and thefold 
abovethe upper eyelid (Figure 7.15). 
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Why? 


From Step 26 to Step 28, we used a workf ow of mark 
the edge f rst and then added detail in the middle. This 
workf ow ensures that we can get the bigger shape f rst 
and never lose control. 


Step 29: Mirror. Select Elen body geo, go to 
Modify->Freeze Transformations. Go to the front 
view, holding down D and Xand usethe Move 
tool to movethe pivot to the center of the grid. 
Go to Edit->Duplicate Special]. Changethe 
geometry typeto Instance, and changethescale 
to —LLL This setting creates an instance of the 
moda so we can seethe full face while modding 
on onesie. 


Tips and Tricks 


After modeling a while, your model might become heavy 
due to all the construction histories. Make sure you press 

Alt +Shift +D to delete history from time to time to avoid 

performance issues, strange behavior, or crashes. 
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Forehead and Nose 


Step 30: Root of the Nose. Select a few edges on the 
center sde of the mode, and extrude out these 
edges towards the center of thegnd. Scalethen 
down on the Xaxisto f atten them, use Move, 
and grid snapping to snap themto the center. Go 
to the sideview and drag them forward, move 
individual vertices to align them to the bndge of 
the nose (Figure 7.16). 

Step 31: Add curvatureto the root of the nose. Add a 
vertical loop to the root of the nose, and move it 
forward to distinguish the front and side plane of 
thenose. Keep adding new loops and tweak the 
vertices until it can reoresent the curvature of the 
nose. Two more loops were added, as shown in 
Figure 7.17. 

Step 32: Connect nose to the eyebrow. Extrudethe 
top loop of the eye socket twice and mergethen 
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with the side loop of the root of the nose. We now 
havea geometry f ow that went through theside 
of the noseto the brow ndge (Figure 7.18). 


Why? 


The edge f ow isthe only tool to represent tums of any 
structure. We built the loop in Step 32 to accurately 
represent the structural change of the nose and eyebrow, 
almost like how you would place the bricks on an arch. 


Step 33: Forehead. Extrude the top loops upwards to 
the edge of the forehead. Add more honzontal 
edgeloopsto support the curvature, just like 
what wedid for the root of the nose (Figure 7.19). 
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Step 34: Nose bridge. Extrudethe bottom edges of 
the root of the nose downward and forward. 
Adjust the vertices to match it with the shape of 
the nose bridge (Figure 7.20). 

Step 35: Mark the loop of the nasolabial fold. 
Extrude an edge downwards fromthe bottom of 
thenosebndge. Select the side edge of the new 
face, and extrude sideways around theside of 
the nose. Don’t forget to rotate it after extrusion, 
so the loop’s edgef ows naturally as the direction 
of theface changes. Keep extruding until the 
entire nasolabial fold is created and extended 
around the mouth area (Figure 7.21). 

Step 36: Tweak the loop of the nasolabial fold. Go to 
thenght view. Drag the vertices of the nasolabial 
fold loop to adjust its shape, so it lays around the 
mouth nicely (Figure 7.22). 

Step 37: Mark other essential loops. Extrude a few 
loops to represent the contour of thesideof the 
nose, nostrils, and bottom of the nose. These 
loops help us def nethe primary areas of the 
nose (Figure 7.23). 
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Notethat this is not a trivial task, and it takes careful 
moving of the verticesin all dif erent viewsto 
ensurethe shape is good at all angles. Some of 
the loops aretouching, so their edges are fused. 


Why? 


Making the contour of dif erent parts gives us the 
framework of the shape. Once f nished, all we need to do 
isto f Il in the gaps. Topology is basically edge loops like 
what we did in Step 36 with grid-like internal f Ils. 


Step 38: Fill the side of the nose. Select the hole of the 
side of thenose, hold Shift +right mouse button, 
and choose Fill Hole. Usethe Multi-Cut tool to 
f II inthe geometry. In Figure 7.24, highlighted 
lines arethe newly added lines to get a dean 
topology. Drag the vertices around to ref nethe 
shape of thesideof the nose. 

Step 39: Fill the tip of the nosethe sameway wedid 
in Sep 38 (Figure 7.25). 
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Mouth 


Step 40: Mouth. Extrude fromthe bottom of the nose 
to createthe philtrum. Fromthe bottom of the 
philtrum, extrude out the loops for the lip. Add 
extra loopsto help def nethe shape better. Be 
careful about the curvature of the moda from 
dif erent angles. It is very easy to end up with 
af at result, so make surethat the arc of the 
contour is always managed (Figure 7.26). 

Step 41: Fill in the gaps between the mouth and the 
nasolabial fold. Bidgethe outer edge of the lips 
to the inner edge of the nasolabial fold; ifthereis 
a mismatch on polycount, just add more loops. A 
pole is needed to sort out the upper right comer 
mesh f ows (Figure 7.27). 





AGRE 727 All inthegaosbawenthenuthautheresdddd fdd 


Gating Gaveswith Urad Engine Substance Paint, & Vaya 





284. 


Rest of the Head 


Step 42: Framethe rest of the head. Create more 
loops around the head to mark the edge of the 
side of theface, ear, top, and back of the head. 
Createloops for the neck and thejawlines as well 
(Figure 7.28). 

Step 43: Fill in the front of the face. Start bridging 
faces of the front of the face using the Bridge, 
Extrude, Fill Hole, and the Multi-Cut command. 
Find the crucial loop that needs to be established 
f rst, and then f Il inthegaps. Makesurethat 
everything you added must be tweaked on some 
level to havethe correct shape (Figure 7.29). 
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Tips and Tricks 


After f Iling in the gaps, the face might not look smooth 
at all. Select the model with object mode, hold down 
Shift +right mouse button and choose Sculpt Tool, hold 
down Shift +right mouse button again, and choose 

Grab. You can now drag any part of the model like you 
are sculpting it. Hold down B button, and then drag to 
change the brush size; be aware that the size of the brush 
might be too big, so you need to zoom out alot to see 

it changing. You can also hold down Shift and then drag 
on the surface of the model to smooth it. Remember that 
Shape Is always more important, don’t drown yourself in 
topology. You will get better and better at topology, but 
if you don’t pay enough attention to shapes, you may not 
get better at it. 


Step 44: Fill inthe side of theface. Wecanf Il theside 
of the face using the same method asin previous 
steps (Figure 7.30). The outer comer of the eye 
does not have enough polycount to connect to 
the other side, so two more loops were added to 
compensatethat. They are marked in Figure 7.30. 

Step 45: Fill in thetop of the head. Thetopology 
of thetop is basically a cube smoothed twice. 
Theimportant thing isto f nd thetwo comer 
points, and they are indicated in Figure 7.3L It 
isthesetwo points that redirect thef ows of the 
polygons. After thesetwo points, geometries 
ether go fromfront to the back or fromsideto 
middle. Notethat Grab and Smooth sculpting 
were used to achievea smooth result after 
getting thetopology working. 
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Step 46: Fill in the back of the head. 


Ear 


The ear might be not as important as the eyes and nose, 
but it is something that if you do not do well, it jumps out 
and ruins your model. We will address the ear carefully in 
detail. 


Step 47: Createthe main loop of the ear. J ust as how 
we did the nose, the ear can also be modeled 
byf rst laying out the primary structures using 
poly loops. Extrude fromthe back of the ear, 
and then start building the loops from there. 
There isa color-coded version of the ear loops in 
Figure 7.32. 

Step 48: Fill the ear. We can usethe bridge and 
extrude command to f Il in the gaps between 
theloops; don't forget to leave a hole open to 
extrude out the ear hole (Figure 7.33). 

Step 49: Connect the ear. Keep bridging and 
extruding faces to connect the ear to the face 
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(Figure 7.34); the polycount might not match 
exactly, and you will need to chooseto add or 
delete edge loops. 


Neck 


Step 50: Fill the bottom of the head. There are many 
lines coming down fromthe head. However, we 
do not want that much happening on the neck. 
Redirecting these edgef ows to tum to the center 
and meet on the other side is a good way of 
getting nd of them altogether (Figure 7.35). 

Step 51: Extrudethe neck. Wechoseto makethe 
neck as simple as possible because the turtleneck 
collar is covering it. All wedo isto extrudefrom 
the bottom of the neck holeto the base of the 
neck, and add extra loopsin the middleto match 
theshape of the concept (Figure 7.36). 
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Internal Structures 


Step 52: Nostrils intemnals. Select the loop of the hole 
of the nostrils and extrude up and inwardsa little 
bit; do it two moretimesso that the hole looks 
extended all the way, and make surethe end Is 
not visible (Figure 7.37). 

Step 53: Mouth intenals. The mouth Intenal isthe 
same topology as thenostnls but needs more 
loops and inf ation of the space inside. Select 
Hlen_body geo, press Girl +1 to isolate it. Then 
select the edge loop of the seam between the 
lips, extrude inwards, and then expand out. 
Makesure that there is space for the teeth. Keep 
Extruding more until the oval mouth intemal 
cavity is constructed (Figure 7.38). 
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Body 


Step 54: Create the center loop of thetorso. Extrude 
fromthefront bottom of the neck; keep 
extruding until the geometry wraps around the 
contour of theright view. Mergeto the back of 
the neck (Figure 7.39). 

Step 55: Chest. Create loops around the chest and 
thearmhole, then bridgea loop fromthe neck 
to thearmholeto mark the range of the chest. 
Fill the hole of the chest; usethe Multi-Cut tool to 
f II in the missing topology; add extra lines if the 
polycount does not work. Usethe sculpting tool 
to smooth and ref netheshapeafter getting the 
topology done (Figure 7.40). 
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Step 56: Fill the back. Using the same method of Steo 
55, wecan f Il the back of the body (Figure 7.41). 
Step 57: Fill the torso. Using the same method of Step 
55. Wecan f Il the waist (Figure 7.42). 
Step 58: Tweak thef ow of the pelvis. Extrude out 
a loop fromthe bottom hole of thetorso, and 
tweak the shapeso that thereisa loop around 
to reoresent the upper edge of the pelvis 
(Figure 7.43). 
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Step 59: Loop of the leg hole. Createa loop of the leg 
and f Il thegap between the pelvis loop to the leg 
loop (Figure 7.44). 

Step 60: Create the leg. Extrude from theleg holeto 
maketheleg. Wecan usea very simple cylinder- 
liketopology to represent it; keep in mind that 
at least three loops are needed to bend the knee 
and ankle propery (Figure 7.45). 
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Tips and Tricks 


After we create the loops that outline dif erent structures, 
it is critical to def ne its prof le properly so that further 
extrusion or f Ils have the perfect shape already. 


Step 61: Ankle. Extrude down fromthe leg, makean 
angle shape at the bottom. The bottom vertex 
will bethe primary tuming point of the edge 
loops- the pole (Figure 7.46). 


Tips and Tricks 


One thing to always keep in mind is to have the same 
polycount on the two sides you know that will merge. In 
Step 61, you need to make sure that the front and back of 
the bottom point have the same polycount. Otherwise, 
you are going to have to add extra lines or delete lines 


later. 
Step 62: Create the feet. We use the same technique 
we have been using to createthe framework 
of the feet f rst and then f Il inthegaps after 
(Figure 7.47). 


293 





Catin Gaveswith Urad Engine Substance Parte, & Vaya 





AGF 746 GestetheaKe 





AGRE 74/7 Gettethefect 


Step 63: Create the deltoid. Go to edge mode, select 
thetop half of thearmhole. Extrude out two 
loops, bidgethe side of the second loop to the 
edge nght below the previously selected edges. 
Tweak theshapeso that the contour matches 
theimage plane and hasa tilted armhole 
(Figure 7.48). 

Step 64: Createthearm. Extrude fromthe armhole 
to create the am. The process is exactly like how 
wedid the leg (Figure 7.49). 
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Hands 


Step 65: Palm. Extrude fromthe wnst to create the 
palm; add a few loops to def nethesizechange 
of the palm (Figure 7.50). 

Step 66: Thumb. Add one moreloop to mark out the 
base of the thumb and then extrudethe faces out 
to createthef rst segment of the thumb. Go to 
Edit->Crculanzeto makethe extruded face more 
rounded, keep extruding, adding edge loop, and 
tweaking to f nish thethumb (Figure 7.51). 

Step 67: Thumb Tip Topology. Delete all the lines the 
tip of thethumb has, and usethe Multi-Cut tool 
to createa new topology like Figure 7.52. Make 
surethat you tweak the shape afterward. 
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Step 68: Create the indexf nger. Start with a cube, 
move it to the base of theindexf nger, and 
extrude thetip out twiceto mark thethree 
segments of thef nger. Tweak thesize of the 
dif erent segments (Figure 7.53). 

Step 69: Add f nger detail. Deetethe face at the root 
of thef nger. Weneed it to open to connect to the 
palm. Switch to Insert Edge Loop tool; hold down 
Shift, and add two more edge loops to round up 
thef nger (Figure 7.54). 
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Step 70: Add thef nger loops. Add moreloopsto the 
f nger; at least three loops are needed for the 
bending of each segment. Tweak the shape after 
adding new loops (Figure 7.55). 
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Steo 71: Duplicatethef ngers. Duplicate the index 
f nger, move, and scalethe duplication to the 
position of the middlef nger. Keep in mind that 
the base of thefourf ngersis not a f at plane but 
rather a convex arc (Figure 7.56). 

Step 72: Combinef ngers. With all f ngers selected, 
select Mesh->Combine. Select the insidetwo 
edges of thetwo adjacent f ngers and bridge 
them. Add one vertical edgeloop to the bridged 
faces and drag it inwardsto mimicthegap 
between thef ngers (Figure 7.57). 
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Step 73: Attach f ngers to the hand. Select both the 
body and thef ngers; select Mesh->Combine. 
Press Alt +Shift +D to clean up the history. After 
combining, some redundant groups may remain. 
Delete all empty groups and name the combined 
moda Hlen_body geo. Bridgethe faces of the 
two ends of thef nger geometry and closest 
faces of the palm and f Il thetwo holes left 
(Figure 7.58). 

Step 74: Ref ne hand topology. Use Multi-Cut to 
connect the linesfromthef nger to the palm. It 
is obviously going to havedif erent polycount; 
just cut through the edge of the palm for now. 
Make sure you spend sometime evening out the 
vertices (Figure 7.59). 

Step 75: Reduce polycount. Mergethetwo adjacent 
points to the point that belongs to theline 
that goes across the gap between thef ngers 
(Figure 7.60). 

Step 76: dean up thetnangles. Please referencethe 
result of Figure 7.6L What wedo isto deletethe 
middle line of the resulting triangle shape in the 
previous step and drag the bottom point down. 
Usethe Multi-Cut tool to add an extra loop that 
goes across the middle of the previous tnangle 
Shape and hasa line connected to the middle 
line between thef ngers. 

Step 77: Fix N-gons. Usethe Multi-Cut tool to redirect 
the extra lines that do not meet with the bottom 
structure sideways. These lines can meet and 
cancel each other out without having to add 
extra lines to the arm. One more edgeloop is 
also added to the big gap between thef ngers 
and palm. Figure 7.62 highlights all the new lines 
added. 
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Step 78: Mirror. Select all the edgesin the middle of 
the body, scalethen along the X-axisto f atten 
them. Hold down Xand drag thenalong the 
Xaxisto snap to the center of thegnd. Switch 
to object mode, hold Shift +right mouse button, 
and choose Mirror. In thef oating setting menu, 
set the Merge Threshold to 0.01 (Figure 7.63). 
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Step 79: Tweak the overall shape. After the body is 
all done, itisa good timeto tweak the global 
Shape and proportion. Hold down Wand drag 
theleft button up and up again; thisshould tum 
on the symmetry and allow you to tweak the 
moda symmetrically. Start tweaking the body 
with whatever tool you feel comfortable with 
(Figure 7.64). 


Hairs 


Step 80: Hair Sculpt. Create a cube, move, and scale 
it to roughly the location and size of the hair. 
Smooth it four times (Mesh->Smooth), so we 
get many polygons to work with. It may shrink 
after smoothing, so scale it up again. Go to 
the Sculpting shaf, pick the grab tool to sculpt 
theshape of the hair. Weonly care about the 
shape of the hair for now. We can give it proper 
topology later (Figure 7.65). 

Step 8L Auto re-topologizethe hair. Sdect the 
hair, choose Mesh->Retopologize. Maya now 
automatically creates a topology for us. After the 
retopology is done, more tweaks can be applied 
to maketheshape of the hair better. 

Step 82: Add hair detail. Snooth the hair twice, and 
now you can useall the sculpting tools to tweak 
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and add more detail to the hair. In Figure 7.66, 
sculpt brush was used to add some basic 
clumping details to the hair. 


Tips and Tricks 


Maya is not the best tool to sculpt; if you want to create 
detailed hair, ZBrush is going to be the tool you use. 


Step 83: Final Hair topology. Sdect the hair modal. 
Go to Status-Line, click on the last magnetic icon 
to makeit live. With nothing selected, hold down 
the Shift +right mouse button, and choosethe 
Quad Draw tool. dick and drag on the hair to 
create new points, and hold down Shift to f Il a 
quad between any points. Start re-topologizing 
the hair and make suretheloopsf ow with the 
direction of the dumps (Figure 7.67). 

Step 84: Finish hairtopology. Keep re-topologizing 
the hair; keep in mind that thef ow of the loop 
should follow the shape (Figure 7.68). 


Tips and Tricks 


When doing topology for games, it is acceptable to end 
up with some triangles to save polycount. It is always 
possible, though, to avoid having triangles. After all, the 
cause of having a triangle is mismatched polycount. 
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Step 85: Eyebrow. Select the model and make it live. 
Usethe Quad-Draw tool again to layout the 
geometry of the eyebrow. Extrudethe eyebrow 
facesto give it thickness. Add a few edge loops 
across the eyebrow and drag the vertices to 
round it up; givethe hair and the eyebrow a 
darker material (Figure 7.69). 

Step 86: Eyelashes. Eyelashes can be donethe same 
way we did the eyebrow, but more dragging Is 
needed to make the shapestick out (Figure 7.70). 

Step 87: Sweater base. Duplicatethe moda, and 
nameit Hlen_sweater_geo. Deetethefaces that 
are not part of the sweater. Do an extra tweak of 
thetopology and theshapeto givethe sweater 
a dean edgeon the chest. Select all vertices of 
thesweater moda, hold down W +right mouse 








AGE 769 Getetheadoow 





AGRE 770 Getethea dads 


button, and choose Axis->Normal. Drag the N 
axis just a littleto inf atethe sweater (Figure 7.71). 
Don't forget to switch the moving axis back to 
the object. 


Step 88: Sweater collar and rolling Jeeves. Extrude 


fromthetop edgeof the collar inwards and 
then downwards to mimic the thickness of the 
turtleneck. Add extra edge loops in the middle; 
drag the faceof the collar out to giveit the 
correct volume. Make extra adjustments to add 
variations and crevices. It should appear to be 
thicker on thetop and bottom, and narrower in 
the middle. The rolling deeves can be donethe 
same way (Figure 7.72). 


Step 89: Outer garment base. Duplicatethe Alen _ 


body geo, nameit Elen _outf t_geo. Deetethe 
faces abovethe chest. MaketheHlen_body geo 
live again, select Hlen_outf t_geo, hold down 
Shift +right mouse button, and choosethe 
Quad Draw Tool. Use retopology to create the 
missing upper part of the outf t and ref nethe 
already existing shapes. Tweak theshapeso that 
it is abovethe sweater, and add thickness by 
extruding the edge of the outf t inwards twice 
(Figure 7.73). 
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Step 90: Preview materials. Hold down thenght 
mouse button on dif erent mode's and choose 
Assign New Material; click on Lambert on the 
pop-up window. Go to the Attnbute Editor and 
changethe color of the material based on the 
reference. Assigning dif erent colors can help us 
spot clipping geometry and better visualize our 
mode (Figure 7.74). 
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Step 91: Belt. Duplicatethe Hlen_outft_geo; ddete 


everything but the loop around the bet. Extrude 
it out to make the belt. Extrude the middle two 
loops of the belt to mimic the buckle. Giveit a 
new lambert material, make it darker, and name 
the bet Hlen_belt_geo. Sdect all the faces below 
the bet, assign a new lambert material to them, 
and changethe color to the color of the pants 
(Figure 7.75). 


Step 92: Create the pattems of the boots. Select 


Elen _ body _geo and makeit live; usethe Quad 
Draw tool to draw out the patterns of the shoes. 
Tum of thelive object, adjust the shape of the 
boots to match the concept, and namethe 
model Hlen_ boots geo (Figure 7.76). 


Step 93: Boots bottom. Duplicate Alen body geo 


onemoretime, and deete everything but the 
bottom of the foot. Adjust its edge so that it 
matches the shape of the bottom of the boot. 
Extrude all the faces down to give it thickness; 
sdiect the faces on the back and extrudeagain to 
create the hed. 
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Select the edges of the upper and lower rim of the model, 
hold down the Shift +right mouse button, and choose 
Bevel Edge. In the pop-up menu, reduce the Fraction 
attribute to make the bevel smaller. Fix the N-gon 
generated by the bevel command (Figure 7.77). 


Step 94: Add thickness to the patterns. Select the 
outline edges of the pattems of the boots, and 
extrude out the thickness. Bidgethe edges of 
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theseamlines, select the rest of the outline, and 
extrude in again for extra thickness (Figure 7.78). 

Step 95: Boot Belts. Select Elen body geo and 
make it live usethe Quad Draw tool to draw 
theupper bet out and extrudethe thickness, 
duplicate, and moveit down for the bottom one 
(Figure 7.79). 

Step 96: Create the base shape of the gloves. 
Duplicate Hlen body geo, sdect all faces that 
you wish to bethe glove, press Cin +Shift + to 
reverse the selection, and press delete button to 
remove all other faces. Select all points on the 
hand, hold down W +right mouse button, choose 
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Axis->Normal, and drag the N axis to movethe 
points out (Figure 7.80). 

Step 97: Add details to the glove. Add moreloops 
at the wnst part of the glove; scalethem up and 
down to mimica layering ef ect. Atthe opening 
of the glove, extrude more loops, and scale them 
to createa ndge. Eventually, add thickness to 
the glove by extruding the edge loops on all the 
Openings to add thickness (Figure 7.81). 

Step 98: Glove belt. Create the belt of the glove using 
thesame method asin Step 97 (Figure 7.82). 

Step 99: Watch. Follow the steps shown in Figure 7.83 
to createthe watch. 


Start with a cube, add edge loops in the middle, and 
expand the loop in the center. Bevel the four comer loops 
to create the base shape of the watch. Extrude the top 
face in and down to create the area of the watch panel. 
Don't forget to use the Multi-Cut tool to f x the N-gon 

in the center. Extrude from the side of the watch to add 
the connections for the watchband. Select the primary 
turning edges of the watch and bevel it; move it to the 
right hand when it’s all done. 





AGURE 780 CGestethebesed goed thedoves 





AGLRE 781 Actiddailstothedae 


313 


CGeingGneswth Urd Engine Suostane Parte, &Maa 





AGLRE 72 Geetethebdtd'thagae 





AGRE 783 Sapstoqetetrendich 


Step 100: Watchband. The wrist band can be easily 
done the same way we created the boot belts in 
Step 97 (Figure 7.84). 

Step 101: Final body adjustment. Spend sometime 
to adjust the whole body; if you havea team, itis 
also an excellent chanceto talk with them. The 
adjusted result of the character looks likethat 
seen in Figure 7.85. A few pockets were added to 
the belt. 


Weapon 


Step 102: Create the base shape of the gun. Createa 
cube, nameit Hlen_gun_geo, scale it down on its 
X-axis to make it narrower, and extrude fromits 
front, back, and bottom faces to createthe dide 
and handle. Keep adding loops and extruding to 
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add extra detail. Figure 7.86 shows the process of 
the shape evolving. 

Step 103: Add extra detail to the gun. Duplicate 
the gun, select the faces that could bethe extra 


3155 
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panes on thegun, press Ctl +Shift +] to reverse 
thesedlection, and press delete to get rid of other 
faces. Extrude out the thickness of the panels, 
drag the vertices around to makethe shape more 
Interesting, add new edgeloops, and extrude out 
extra detail (Figure 7.87). Combinethe body and 
the panels together, delete the history, and name 
it Hlen_gun_geo. 

Step 104: Gun holster. Follow Figure 7.88, movethe 
gun to thesideof thenght leg, and makethe 
Hlen_outft_geo live. Usethe Quad Draw tool to 
layout the shape of the base of the gun holster, 
and moveit outwards a little afterward to 
separate it fromthe leg. Using the same method, 
wecan get the prof leof the outer layer of the 
holster. We need to move points out to wrap it 
around the body of the gun. A few loops were 
added to support the curling shape. Two straps 
were created around theleg afterward. 


Tips and Tricks 


When making weapons, it is crucial to make sure that the 
size of the weapon is suitable to the character. The handle 
of the gun was extended to make sure it f ts in the hands 
of the character. 





Final Clean Up 


Step 105: Delete hidden geometry. Duplicatethe 
Elen body geo,nameit Hlen_full_ body _ref, 
and press Qr +H to hideit. Select Hlen_body_ 
geo, select the faces that are hidden under the 
garments, and deletethen (Figure 7.89). 


Why? 


We have a copy of the full body and hid it as a backup 
In case something needs to be changed or added. We 
rely on the body to add all the garments and props. For 
rigging, it is easier to bind the joints with a full-body, 
do the skin weighting, and copy the weight over to the 
garments. 


Step 107: Separate and rename. Select Elen _ 
body geo and Cick on Mesh->Separate. The 
moda now separates to multiple ones based on 
connectivity. Combine the hands and arms, and 
namethenew mode! Hlen_hands_geo. Sdect 
the head and nameit Hlend_head_geo. Press 
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Alt +Shift +D to ddetethe history. Select the 
resulting group Elen body geo, and click Edit- 
>Ungroup to ungroup it. The outliner ends up as 
shown in Figure 7.90. 


Tips and Tricks 


Facial Expression rig requires something called 
Blendshape. It is much cheaper to do Blendshape on a 
simpler model; that is why, if possible, separate the head 
from the body. 





Conclusion 


We made it! We have a character that is ready to go for UV 
texturing, rigging, and animation; the polycount is 29,250 
Tris, alittle lesser than our prediction. The whole character 
is designed and modeled in a week. We have used many 
techniques. However, there are far more areas of character 
modeling we have not touched, like ZBrush sculpting and 
Marvelous Designer, to name a few. If you ever want to 
have more advanced knowledge on character modeling, 
ZBrush is the next to jump in, and it is a super fun 
software. Feel free to stay here and do more tweaking of 
the shape of the character before moving on. It is critical 
to have a good-looking character with proper topology 
for rigging and animation. The f nal model is shown in 
Figure 7.91. 


In the next chapter, we will go over the UV Mapping of the 
character. UV is the foundation of texturing and is of great 
importance to bring life to our solid colored character. 
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UV for characters is particularly important. It isthe 
foundation of good texture mapping, which is the primary 
way we add color and detail to our character. With a 
proper texture set, we can make a 30k tris polygon looks 
like a million tris. 


It is, however, safe to say, modeling is more critical now 
than it was 10 years ago. This is the last time we are asking 
you to check your model before moving on. Make sure 
that you and your team are 100% happy with the shape of 
the character. Once we move further on, changing of the 
shape will need you to change the UV to avoid stretched 
textures. 
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UV Mapping 


UV mapping algorithm has been improved through 

the years; so, all artists need to do is to def ne the seam 
properly and lay out the UV the ef cient way. There 

are other tools like Unfold 3D that are dedicated for UV 
Mapping, but Maya’s UV tools are already amazingly good. 
So, we will stick with Maya for the ease of not having to 
move to a dif erent package. 


Tutorial 8.1: Character 
UV Mapping 


In this tutorial, we will jump into UV mapping of the 
character. We are going to do abasic error checking of the 
model, def ne seams of the UV shell, unfold them, layout 
and organize the UV, and assign shading groups. Along 
the way, we could discover more modeling problems, and 
we will address it right away. 


Mesh Inspection and Cleanup 


Based on how experienced you are at modeling, there could 
be many problems in your model. Let’s review some of the 
common problems in case you have them on your model. 


Step 1: Flipped faces. In the viewport menu, go to 
Lighting and check of Two-Sided Lighting; if 
any faces of the moda appear to be black, select 
these faces and do Mesh Display->Reverse. 

Step 2: Check N-gon. Select the moda you want 
to check, go to Mesh->Clean Up]. Changethe 
Operation to Sect matching polygons and 
check on Faces with morethan four sides in 
the Fix by Tessellation section. Press the apply 
button. If there is any facethat is selected, they 
are N-gons. 

Step 3: Fix N-gons. N-gon is basically caused by 
polycounts that are not matching; to f x N-gon, 
you ether add more loops on oneside or delete 
loops on the other side. Figure 8.1 showstwo 
optionsto f xa pentagon; unlessthereisa 
particular reason to add a new loop, deleting 
oneisa better choice. Another option isto use 
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the Multi-Cut tool to cut the N-gon to tnangles 
and quads. 

Step 4: Overlapping faces. There could bea chance 
that you havetwo faces stacked right on top of 
each other and sharing the same edges. Select 
the moda and hit 3 to smooth preview the moda 
and check thef ow of the wireframe. If you f nd 
something irregular (Figure 8.2), you know that 
something must be wrong. It isrecommended to 
delete these faces and redo themto ensureit is 
bug-free. 
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Step 5: Middle line problem. Select the moda you 
want to check, go to edgemode, double-click 
to select the vettical loop in the center. If the 
sdection isnot all theway to theother side, 
go check the breaking point and f xit. The 
problem could bethat the points there are not 
merged; an extra face is extruded, or morelines 
are overlapping in there (Figure 8.3). It is also 
recommended to deletethe problematic area if it 
is unclear what is wrong. 

Step 6: dean up the history and freeze 
transformation. Select all models and press 
Alt +Shift +D to daetetheir history. Go to 
Modify->Freeze Transformations to clean up 
their transformation. 


Why? 


Topology error occurs all the time, even for industry 
veterans. It’s important to f x them before moving on to 
the next steps to avoid having to redo things like rigging, 
UV, and more. 


We have done UV mapping with the environment already, 
and the techniques we will be using here are not that 

dif erent. In the author's opinion, it is sometimes easier to 
do UV for organic shapes because there are no clear hard 
edges. Most of the times, we think of only three things: 
hide the seam, avoid stretching, and texel density. 


Body UV 


Step 7: Setup workspace. Go to the upper right 
comer of the UI, and under workspace, select UV 
Editing. Movethecursor to the UV editor, press 
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the number 5 button to toggle on the Shaded 
viewing mode. This view mode gives every 
dif erent UV shell a dif erent solid color. 

Step 8: Projection. Select Hlen_head_geo; navigate 
the view to a 3-quarter view, go to UV->Planar(]. 
Under the Project from section, choose Camera. 
Cickon apply to project the UV fromthe 
perspective camera that weare currently looking 
through (Figure 8.4). 

Step 9: Cutting the ear. Go to object mode, hold 
down W, and drag the left mouse button up and 
up again to tum on symmetry. Choose UV->3D 
Cut and Sew UV Tool. Cick and drag the lines 
around the ear until it iscut of . You know It’s 
completely cut of when ittumsa dif erent color. 
Double-dick the loop of the earholeto cut it out 
to avoid stretching. Don’t forget to double-click 
on oneof the inner loops of the ear holeto cut it 
open like a cylinder (Figure 8.5). 


Tips and Tricks 


When using 3D Cut and Sew UV Tool, click and drag cuts 
the lines under the cursor. A double-click cuts an entire 
edge loop. Holding down Ctrl while doing the previous 
operations sews the lines back together. 
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Step 10: Qut the mouth and the nostrils. Double- 
click to cut the edge loop that isthetouching 
edge loop on the inner side between the upper 
and lower lip; this will cut of themouth cavity. 
Double-click to cut the center loop of the upper 
part of the mouth cavity. Using thesame 
method, we can cut the inner part of the nostnils 
out (Figure 8.6). 
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Step 11: Cut thejaw and neck. Cut the loops under 


thejawlineand the back of the neck (Figure 8.7). 


Step 12: Cut arms and hands. Project the UV of Elen _ 


hands_geo thesame way using UV->Planar. The 
armis basically a cylinder. Go to UV->3D Cut and 
Sew UV Tool and double-click the bottom loop of 
thearmto cut it open. Cut the middleline on the 
side of thef ngers to separate then into up and 
bottom shells (Figure 8.8). 


Step 13: Unfold and optimized the UVs. Tum of 


symmetry, go to object mode, and select both 
Hlen_hands_geo and Hlen_head_geo. Inthe 
UV Editor, hold down the right mouse button 
and choose UV, and drag-select all the UV points. 
Hold down the Shift +nght mouse button, go to 
unfold-Sunfold_], and set the Method to Unfold 
3D; press the Apply and Cose buttons. The shells 
should now be unfolded nicely. 

Hold down the Shift +right mouse 
button, go to Optimize]. Under the Optimize 
Options section, set the Iterations setting 
to 30, press Apply and Close (Figure 8.9). 
You can do optimize many times to reduce 
stretching further. 
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Tips and Tricks 


When using Optimize to help reduce stretching, it may 
cause some UV to overlap each other. Make sure that 
you check for overlapping UV after using the Optimize 
command. 


Step 14: Layout UV. With all the UVs selected in the 
UV Editor, hold down the Shift +right mouse 
button, go Layout->Layout(]. Under the Pack 
Settings section, change Packing Resolution 
to 4096; under Layout Settings section, set 
Texture Map Sizeto 4096, Shell Padding to 30, 
and Tile Padding to 30. Click on Apply. The 
UVs are now arranged for us automatically 
(Figure 8.10). 

Step 15: Manually adjust the UV layout. The UV laid 
out is technically f ne but could be enhanced. We 
can seesome unutilized soace and sometilted 
shells that could be morestraight. Double-click 
any UV point of a UV shell to sdect the entire 
shell; in the UV editor menu, select Modify-> 
Orient shellsto make it straight. Rotatethe shell 
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Why? 


whileholding down the} button on the keyboard 
to nap it to the correct orientation. Scaleall UV 
up a little bit, and moveand rotatethe shells 
around to get maximum UV space utilization. 
Avoid overlapping of theshells and keep all shells 
inside of the UV space (Figure 8.11). 


We want to squeeze all the possible performance and quality 
out. That means even alittle better UV space utilization isa 
win; that’s why manually adjusting the UV is necessary. 


Eye UV 


Step 16: Eyeball UV Mapping. Select Hlen_ | eye_ 


geo, go to UV->Planar to project it to the UV 
Space. Go to UV->3D Cut and Sew UV Tool, and 
double-dick to cut the vertical loop in the middle 
of the eyeball. Select all the UV vertices, hold the 
Shift right mouse button; go Unfold->Unfold. 
Double-click any UV point of thefront shell to 
select the entire shell, hold the Shift +right mouse 
button, go Layout->Layout. Scalethe shell down 
just a little bit to avoid it touching the edge. 
Select the back shell, scale it down, and moveit 
to any comer (Figure 8.12). 


| 


\ si) be 
\ : fl ah ab 
<A Drag to cut. Ctrl-drag to sew. 
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Why? 


We will never see the back of the eyeball, so there is no 
point in wasting UV space; that’s why we scaled it down 
and moved it to a comer. 


Step 17: Copy UV to the other eyeball. Select Blen _|_ 
eye geo, addseect Elen _r_eye_geo. In the main 
menu, go to Mesh->Transfer Attnibutes_]. Under 
the Attribute Settings section, set the Sample 
space to Component, and press the Transfer 
button. Press Alt +Shift +D to ddetethe history. 
After the operation, both eyeballs should have 
identical UV Layout. 


Hair UV 


Step 18: Hair UV. Project the hair UV to the UV Editor 
the sameway we did for the body and eyeball. 
Go to 3D Cut and Sew UV Tool, f nda relativey 
hidden loop to cut the frontal hair dump open; 
it is also helpful to cut the back half of the hair 
open. With all UV vertices of the hair selected, do 
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an Unfold command and an Optimizecommand 
to unfold it. Moveit, so itf ts in the UV space 
nicely (Figure 8.13). 

Step 19: Eyebrow UV. Select Hlen_eyeorow_geo, and 
do a planner projection. Go to 3D Cut and Sew 
UV Tool, cut the backside and bottom edges to 
open it. Select all the UV vertices of the eyebrow, 
do an Unfold, Optimize, and Layout command 
(Figure 8.14). 

Step 20: Eyelash UV. Do the eyelash UV the same way 
we did in Step 19 (Figure 8.15). 

Step 21: Combine the UVs of the eyebrows, 
eyelasnes, and the hair. Sdect Hlen_hair_geo, 
Hlen_eyebrow geo, and Elen eyelashes geo. 
In the UV Editor, select all UV vertices. Do a layout 
command. Select all the eyeorow and eyelash 
UV. Scale, rotate, and movethen to takeover all 
the UV space (Figure 8.16). 


Why? 


We have scaled the eyebrow and eyelashes up, and this 
will result in uneven UV distribution. However, it gives us 
more resolution for the eyebrow and eyelashes. It is going 
to help us to add more detail to them if necessary. 
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Garment UV 


Step 22: Project the rest. Select the rest of the models 
together, go to UV->Planner to project themall 
at once (Figure 8.17). 

Step 23: Qut the sweater. Sdect Hlen_sweater_geo; 
usethe 3D Cut and Sew UV Tool to cut the 
sweater. Cut thetwo arms, two rolled back 
sleeves, and the collar out; these parts are 
basically cylinders. J us f nd a relatively hidden 
loop to cut then open. Cut the rest of the body to 
front and back pieces in the middle (Figure 8.18). 

Step 24: Cut the outf t. Sdect Hlen_outft_geo, Cut 
the mode to front and back pieces through the 
middle on the outside and between the legs. Cut 
through the loop of the waist where we have 
the separation of the color of the pants and the 
upper part (Figure 8.19). 

Step 25: Cut the UVs of the belt. Sect Blen_belt_ 
geo, cut the loop on the inner side of the bottom 
of the belt, cut the center vertical loop on the 
back, and cut the buckle out (Figure 8.20). 

Step 26: Cut the pockets. The pockets are basicallya 
cube; if you look at the default UV of a cube, that 
is going to be exactly how we cut the pockets, 
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almost exactly how a pizza box is opened 
(Figure8.21). 

Step 27: Qut the gun. The gun is a bit complicated, 
but just like any hard surface UV wehavedone, 
we can deal with individual pieces one by one; 
the cutting choices we've madeare shown in 
Figure 8,22. 


(0/5) UV shells, (0/348) 
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Tips and Tricks 


When we are trying to f gure out where to cut the UV, 
there are three things to think of: 





1. Stretching - Find the primary turning part of the 
shape and cut there. If not, stretching is most likely to 
happen. 

2. Hide the Seams - Cut places that are hard to see if 
possible. Try to cut less if possible. 

3. Texel Density - Make sure there is a consistency of 
the resolution of the textures on the 3D model. 


It is also up to the texturing habit of the artist and the 
nature of the tools to determine some of the cutting 
rules. Texturing with photoshop will require lesser 
seams while texturing in Substance Painter is pretty 
much free from seam problems, or the seam Is at least 
easily f xable. 


Step 28: Cut the rest of the model. Using a smilar 
method as before, wecan cut therest of the 
modas. Figure 8.23 showsall the cutting choices 
we've made. 

Step 29: Unfold, optimize, and layout. Grab all the 
garment mode's we projected and cut. Select all 
UV vertices, do an Unfold, Optimize, and Layout 
command (Figure 8.24). 

Step 30: Separate the UVs. We can Separate the UVS 
of all the garment into four UV sets: 


1. the upper body. 
2. the pants, shoes, and belts. 
3. the gloves and watch. 


4. thegun. 
First, moveall the UVs away fromthe UIVL 
space. Start with selecting the upper body 
parts, and this includes the sweater and the 
upper part of the outf t. After selecting, doa 
Layout command to lay out the UVs selected 
to the U1V1 space. Don't forget to do some 
manual arrangements afterward. 

Go to the UV Toolkit on thenght sde 
of the UV Editor. In the Transform section, 
changethe value of the Movesetting to 1 
Cick on thenght-angle arrow to movethe UV 
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set to the next UV space on thenght; click six 
moretimesto moveit to the seventh UVtile 
on thenght. Keep doing this until all four tiles 
are created (Figure 8.25). 


Why? 


We have purposely arranged the UV to the four tiles to 
get more resolution. The gloves, the watch, and the gun 
also have higher resolution because they are close to the 
viewer in the game. We can check the relative resolution 
by checking on the Checker Map option in the Textures 
menu in the UV Editor. The smaller the checker pattern is, 
the higher the resolution. 


Tips and Tricks 


When it comes to arranging the UV sets, it is helpful to 
arrange them based on material type. Fabric, metal, and 
leather should be put into their separate UV sets. 


Sep 31: Assign garment materials. We will giveeach 
UVset wecreated a dif erent material. Starting 
by sdecting all the faces of the gun in the UV 
Editor, hold down the night mouse button in 
the perspective view, and chooseAssign New 
Material. Inthe pop-up window, select Lambert. In 
theattnbute Editor, namethematenal Gun_ mul, 
and drag the dider of the Color attribute of the 
material down to make it darker to dif erentiate 
it fromothers. Do thesamething for the other 
threetiles. Then, namethemas Lower body mul, 
Glove_and_watch mtl, Upper body mul, and 
Gun _mti. After assigning the materials, grab the 
U\6 of each UV set and usethe Move button inthe 
Transformsection of the UV Tool Kit editor to move 
theseall back to U1V1 space. 

Step 32: Assign all other materials. Grab Elen _ 
hands _geo and Hlen_head_geo, givethena 
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Lambert material and namethe material Body _ 
mtl. Grab thetwo eyeballs, givethena Lambert 
material and namethe material Eye_mtl. Finally, 
grab thehair, eyebrow, and eydash modes, give 
thema Lamber material and namethe material 
Hair_mtl. Thef nal material distribution is shown 
in Figure 8.26. 


Why? 


There are seven materials created for the character; itis a 
little heavy to use, but we are going to get good quality. 
How many materials are used is based on the engine and 
the target platform. For our desktop game, we can spoil 
ourselves a little. 


Conclusion 


We have now f nished the UV Mapping process. It takes 
some time but is often not considered dif cult to do. 

All we did here is to project, cut the seams open, unfold, 
and layout. However, the arrangement and the packing 
of these UV pieces require some serious thinking. UV 
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Mapping isthe foundation of the texturing process and 
cannot be overlooked. Please double and triple check 
your UVs and material assignments to ensure that there 
are no overlapping UVs and all materials are named 
properly. We are going to move on to the next exciting 
chapter - Character Texturing. 








Character texturing is very similar to the set texturing we 
did in Chapter 3. However, amore complicated process 
might be needed to get a good-looking skin and enough 
detail on the clothing. It is also a fun part of doing 3D art. 
Since we have talked about the tools before, we will jump 
into the texturing process right away. 


Steo 1: Export. Select all models except the hidden 
full-body, and go to File->Export Selection. In the 
pop-up widow, change the Files of typesetting 
to FBX export, and set the File Nameto Hlen_ 
Texturing to SP-flx. ick on thesourcamages 
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under the Current Project list, dick on theyellow 
folder shaped button on thetop row of the 
window to create a new folder, and nameit 
Allen_ texturing. Double-click the newly created 
elen _texturing folder, then click on the Export 
Selection button to export the modal. 

Step 2: Import the mode to Substance Painter. Open 
Substance Painter; here, weimport our moda 
with the same setting we used when we import 
our environment assets. 

Step 3: Baking. On the nght side of the UI of 
Substance Painter, f nd TEXTRUE SET SETTINGS 
pane; click on the Bake Mesh Maps Button. 
Changethe Output Szeto 4096. Check on Use 
Low Poly Mesh as High Poly Mesh, and change 
the Antialiasing to Sulbsampling 8 x8. Gickon 
the Bake All Texture Sets button to start baking. 
Weset the best quality, give it a few minutes to 
f nish the baking task (Figure 9.1). 

Step 4: Check baking error. Look around the 
mode! to check if there are any baking errors. 
It is very unlikely to see errors if we bake the 
mode! using the Use Low Poly Mesh as High 
Poly Mesh option. Zoomin to the head, the 
eyeballs may appear to have some baking 
artifacts. The artifacts on the eyeballs are due 
to overlapping UVs - both eyeballs are using 
thesame UV mapping. Hold down Cin +Alt 
and right-click on one of the eyeballs to select 
the Eye_mtl. Go to TEXTURE SET SETTING, and 

under the Mesh maps section, click on the X 
button on all the maps in thelist to get rid of 
the baked maps. 
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Why? 


The eyeballs can look around, baking an ambient 
occlusion map and other maps would not make much 
sense. There are other moving parts like the mouth that 
we should, in theory, open when baking so that no dark 
ambient occlusion is baked on the part where the upper 
and lower lips meet. 


Skin Texturing 


Step 5: Basic skin color. Hold down Cin +Alt and 
right-click on thefaceto switch to Body Mtl. Go 
to the LAYERS pand. Click on the bucket icon 
to add af Il layer. Double-dick on thename of 
the Fill layer 1 to renameit as Skin_Base. Go the 
PROPERTIES panel, changethe base color to a 
basic skin color, and drag the Roughness slider 
higher to make it less shiny (Figure 9.2). 

Step 6: Skin red tint base. Create another f II layer, 
rename itto Red Tint, changethecolor to a pure 
red color. Under the MATERIAL section, click on 
height, rough, metal, and nrmto tum of these 
channels. Right-click on the Red_ Tint layer and 
select Add black mask. Right-click on the black 
mask and select add f Il. On thenght side of 
thef Il, set the visibility percentage to 80. In the 
PROPERTIES pand, click on thegrayscale, type 
in clouds in the search bar and dick Gouds 1, set 
the Projection to Tn-planar projection, and set 
the Scale setting to 16 (Figure 9.3). 


Why? 


It may appear to be crazy after Step 6. However, we are 
going to layer multiple textures together to get a proper 
f nal skin result. And we can get very rich color variation 
by doing it this way. Tri-planar projection projects the 
texture from the front, side, and top views of the model; 
this enables the avoidance of any seams. 


Step 7: Paint red color distribution. Right-click on the 
mask of Red_Tint, and select add paint. Press 1 
button to switch to the paint brush. Go to SHELF, 
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under Brushes, f nd and click on the Dirt 1 brush. 
Tum on symmetry, and start painting on the 
redder areas. These areas arethecheek, tip of the 
nose, lips, ear, and anywhere with more blood, 
typicallythe muscles and higher areas of the face 
(Figure 9.4). 

Step 8: Paint blue color distribution. Select Red_Tint, 
and press Ctr +C and then Qr +V to duplicate 
thelayer. Namethe new layer Blue Tint, and 
changethe color of thelayerto a pure blue 
color. dick on themask of thelayer, and select 
Clouds L Inthe PROPERTIES pane, click on the 
grayscale CGouds 1 button, switch it to Gouds 3 
so that the blue color uses a dif event noise. 
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dick on the X button on thenght side 
of the Paint mask layer to delete it. Createa 
new Paint layer and start paint the vanation 
of the blue color. The areas on thefacethat 
have more bluetint arethe eye socket, jaw, 
and typically low areas or cavities. Someof 
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the areas of the face likethe cheek and nose 
may need lesser bluetint; hit the X button to 
changethe color of the brush to black and 
eraseblueof these areas (Figure 9.5). 

Step 9: Paint yellow color distribution. Copy paste 
the Blue Tint layer, and namethe new layer 
Yelow_Tint. Changethecolor to a slightly greyed 
out warm yellow color. The color should be close 
to the color of the bone but more saturated. Click 
on the mask of the layer, sdect Clouds 3, and set 
its visibility to 30; under the PROPERTIES pane, 
changethe Scale setting to 3. Delete and recreate 
the paint layer and paint the vanation of the 
yellow color. Yellow color mostly appears on the 
bony area (Figure 9.6). 
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Tips and Tricks 


The color variation of a human face is complicated. 
However, you can follow this rule of having the high areas 
red, low areas blue, and bony areas yellow. 


Step 10: Add a white color overlay. Copy and paste 
the Yellow_Tint layer, name it White Cover, 
changethe Aoud 3 to Fractal Sum 1, and reduce 
the opacity to 50. Wedo thisto add an overall 
white coverage to even out the color variation 
(Figure 9.7). 

Step 11: Balance skin variation. Select Red_ Tint 
layer, hold down Shift, and click on White_Cover 
layer to select all the color layers. Press Cin +G 
button to createa group. Namethegroup Color _ 
Variation. Add a black mask to this group and 
add af Il layer to the mask. In the PROPERTIES 
pana, change the GRAYSCALE valueto 0.15. Add 
a paint layer to the mask; usethe paint brush to 
makethe color tint more visbleon the cheek, 
nose, and eye socket (Figure 9.8). 

Step 12: Overall adjustments. Add a new paint layer 
ontop of the Color _Vanation folder. Change 
thenameto Overall Adjust. On the upper right 
comer of the layer, changetheblending mode 
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from Normto Passthrough. Any adjustment we 
apply to this layer should af ect all layers beow 
with the Passthrough blend mode. 

Right-click on the Overall. Adjust layer, and 
saect Add Filter to add af Iter to it. Sdect the 
Filter layer added to it; under PROPERTIES pane, 
tum of height, rough, metal, and nm. Aick on 
the Filter button, and chose HSL Perceptive. We 
can now usethesetting in the PROPERTIES panel 
to tweak the hue, saturation, and lightness of 
thetexture. The Hue, Saturation, and Lightness 
are set to 0.51, 0.53, and 0.51, respectively. Add 
another adjustment layer, and chose Blur as 
thef Iter; set the Blur Intensity to 2. The vigbility 
of the Blue_Tint layer is also reduced to 80 
(Figure 9.9). 


Why? 


It seems a huge waste of time doing all the blending and 
eventually blurring it. However, it can make a substantial 
dif erence with all the noisy blendings. It is also because 
of the stylized art style that we blurred our texture quite a 
bit to make it look clean. 
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Step 13: Lips. Createa new f Il layer, and nameit 
Lip, set its color to a darker red color, and set its 
roughness to 0.2. Givethe layer a black mask, 
and add a paint layer to the mask. Go to the 
Brushes shelf, chosethe Basic Soft brush, and 
paint on thelipsto makethem red. 

Reducethe visibility of the Lip layer to 50 
to have better blending. Add another f Iter to 
the mask; in the PROPERTIES panel, change 
the Filter to Blur, and set the Blur Intensity 
setting to L5 (Figure 9.10). 


Tips and Tricks 


Instead of trying to f gure out the color of the lip, it is 

easier to control by adding a pure red color f rst and then 
reducing the visibility to determine the color. After all, the 
reason the lip is redder is because it has more blood vessels. 


Step 14: Fingenails. Create a new f II layer, and 
name it Fingenails. Set the color of thelayer 
to white, and set its roughness to 0.3. Givethe 
layer a black mask and add a paint layer to the 
mask. Go to the Brushes shelf, chose the Basic 
Hard brush, and paint on thef ngemnails. Finally, 
reduce the visbility of the Fingemnails layer to 
40 to have better blending (Figure 9.11). 
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Hair 


Step 15: Hair base color. Hold down Cin Hight 
mouse button on the hair to switch to the Hair_ 
mtl. Add a new f Il layer, and namethe new layer 
Hair Base. Set the Base Color of Hair _Baseto a 
dark red and set the roughness to 0.45. 

Step 16: Hair dark color. Copy and paste Hair_ Base 
and namethe duplicate as Hair_ bottom. 
Makethe color darker and change its Height to 
—0.5. Right-click on the layer and giveit a black 
mask. Add a paint layer to the mask. Pressthe D 
button to togglethe steady stroke; steady stroke 
makes your stroke moref uid. Sart drawing lines 
to mimictheedge of the various clumps on the 
hair (Figure 9.12). 


Tips and Tricks 


When drawing the hair clumps, make sure that the lines 
are f uid and f ow with each other. When a line meets 
another, make sure its direction is gradually aligned with 
the other line when they meet instead of cutting into the 
other line directly. 


Step 17: Blur the hair clumps. Right-click on the mask 
of Hair Bottom, and chose Addf Iter. Gick the 
Filter layer, go to the PROPERTIES pana, change 
the Filterto Blur, and set the Blur valueto 1.5 
(Figure 9.13). 

Copy and pastethe Hair _Bottom layer; 
namethe duplicate as Hair Bottom Sharp. 
Changeits Blur value of the Blur f Iter of 
its mask to 0.5. Make another duplication 
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and nameit Hair Bottom Soft, change its 
Blur value of the Blur f Iter of its mask to 3 
(Figure 9.14). 


Why? 


We used three layers to add the height information and 
utilized dif erent blur values to achieve good control 
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of the slope of the hair clumps. It would be dif cult to 
achieve both def ned and soft results at the same time 
with only one layer. 


Step 18: Hair bright color. Copy and pastethe 
Hair_bottomlaye, namethe duplicate Hair Top, 
changethecolor to a brighter color, and change 
the Height to 1. Right-click on the Paint layer in 
the mask, select Add f Iter, changethe new f Iter 
layer to Bevel, and change the Distance setting 
of the Beva to 1. Add another f Iter layer on top of 
the Beva layer and change the Filter to Invert. Set 
the visibility of the Hair Top layer to 10. Thehair 
should now havea subtle bright tint on the high 
ground of the hair clumps (Figure 9.15). 

Step 19: Eyebrow and eyelashes. Create another 
paint layer on top of the mask stack of the mask 
of the Hair_Top layer; paint black color over the 
eyebrow and eyelashes to makethen dark. 


Eye 


Step 20: Eye white. Switch to the Eye_mil, createa 
new f Il layer, and nameit Eye White. Change 
thecolor of the layer to a red color, give it a black 
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mask, and add a f II layer to the mask. In the 
PROPERTIES pang, dick on the grayscale button. 
In thesearch bar, typein polygon 2, and select 
polygon 2. Togglethe Invert option on, and set 
the Histogram position to 0.65. Under the Patten 
section in the PROPERTIES panei, changethe 
Sides setting to 32. The eye white should now 
havesomered tint on thecomer. 

Step 21: Ins group. Click the folder icon under the 
LAYERS pane to create a new folder, and name 
it Iris. Createa new fl layer, drag it into the Ins 
folder, and renameit as Iris Baseand changethe 
color of Iris_Baseto a dark brown color. Right- 
dickon thelrisfolder and add a black mask; give 
the black maska f Il layer, and makeit polygon 2. 
Thistime, set the Histogram postion to 0.28, 
Histogram contrast to 0.96, and Sidesto 32. The 
mask now constraints everything under the Ins 
group in thecirdearea def ned by polygon 2 
(Figure 9.16). 





Why? 


We chose polygon 2 as the mask instead of painting 

it ourselves with a brush. Using polygon 2 makes it 
more f exible and cleaner; this is also something we call 
procedural texturing. 


Step 22: Iris contour. Copy and pastelns Baseand 
namethe new layer Iris Contour. Makethe color 
darker, and giveit a black mask. Right-click 
on the mask of Iris folder, chose Copy mask, 
nght-click on thelns Contour, and chose Paste 
into mask. The polygon 2 from Ins group is now 
copied to Ins Contour. Add another f Il to the 
mask of Ins Contour, chose polygon 2 again, 
and change thef II layer blend typeto Subtract. 
In the PROPERTIES pana, set the Histogram 
postion to 0.23, Histogram contrast to 0.9, 
and Sides to 32 (Figure 9.17). Again, we have 
procedurally made the dark nm of theins with 
the polygon 2 texture. 

Step 23: Pupil. Copy and paste Iris Base, namethe 
new layer Pupil, makethe color darker, give it 
a black mask, and add af II layer to the mask 
with polygon 2. In the PROPERTIES pana, set the 
Histogram position to 0.1, Histogram contrast to 
0.85, and Sidesto 32 (Figure 9.18). 
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Step 24: Instop shading. Copy and paste Iris Base, 
namethenew layer Iris Dark and makethe color 
darker. Give the new layer a black mask, and 
add af Il layer to the mask. In the PROPERTIES 
pane, click on the grayscale, search, and choose 
Gradient Linear 1. Under the Parameters section 
in the PROPERTIES pang, set the Balanceto 
0.475, and the Contrast to 0.9 (Figure 9.19). 

Step 25: Iris bottom light. Copy and pastelns Base; 
namethenew layerIns Bright. Makethecolor 
brighter, click and drag it to moveit above 
Ins Dark. Givelns_ Bright a black mask and add 
a paint layer to it. Thistime, weusethe Basic 
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Soft brush to paint around the bottom portion 
of thelnsto mimic lights traveling out of the Iris 
(Figure 9.20). 

Add another f Iter to the mask of Ins _ 
Bright and changethef Iter to Blur to blur the 
mask (Figure 9.21). 


Why? 


In theory, the darkness of the upper portion of the iris is 
caused by shading. The brighter color on the bottom part 
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of the iris is lighting traveling out. Our model is too simple 
to support such accurate shading, so we faked it using 
textures. 


Step 26: Irisf ber. Createa new f II layer above 
Ins Bright, nameit Iris Fiber, changeitscolor to 
a dark brown, and set the height valueto —0.3. 
Givethe layer a black mask and add af Il layer 
to the black mask. In the PROPERTIES pane, dick 
on the grayscale, search and select Circular Stick. 
Inthe Parameters section, set the Number to 64, 
Of set to 0, Bar Length to 1, and Bar Width to 
0.005. Wenow havea densef ber covering the 


359 


CGeatingGrreswithUred Engine Suostene Parte; &Maa 


TEXTURE SET LIST 


Body_mti 

Eye_mtl 
Glove_and_watch_mtl 
Gun_mti 

Hair_mtl 
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ins. Add a blurf Iter to the mask to make it softer 
(Figure 9.22). 

Step 27: Fixheight eror. Sdect thelns Contour 
layer, under the LAYERS pana, right beneath 
the LAYERS label, and changethe Base Color 
to Height. Changethe blending mode of the 
Iris Contour to Normal to makethe dark contour 
block the height information below it. 

Select the bottom Polygon 2 in the mask 

of thelns Contour layer, set the Histogram 
Position to 0.3 and Histogram contrast to 1 to 
cover the outer edge of the Ins (Figure 9.23). 

Step 28: Eye roughness. Create a new f II layer at the 
top of thelayer stack and name it Roughness. In 
the PROPERTIES pana, tum of thecolor, height, 
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metal, and nmm channels. Set the roughnessto 
0.25 to tighten up the highlight (Figure 9.24). 


Upper Body 


Step 29: Sweater base. Switch to the Upper_body_ 
mti, add a newf II layer and nameit Sweater _ 
Base, change its color to a dark gray, and 
roughness to 0.8. Press Girl +G to group it under 
a folder; namethe folder Sweater. Add a black 
mask to the folder and givethe mask a paint 
layer. Hit the number 4 button on the keyboard 
to togglethe polygon f II tool; in the PROPERTIES 
pane, click on the checker box button to switch 
to UV shell selection mode. Changethe Color to 
1, go to the 2D view, and click on the UVs of the 
Sweater (Figure 9.25). The mask should now be 
white on the sweater. 
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Step 30: Sweater pattem. Go to Materials, f nd Scarf 
wool, drag it above Sweater_Base, and rename 
it as Sweater _Pattem. In the PROPERTIES pand, 
changethecolor to a dark gray; under the 
Technical Parameter, change the Height Range 
to 0.25 (Figure 9.26). 

Step 31: Fixthe patten direction of the left sleeve. 
Add a white mask to the Sweater Patten and 
add a paint layer to the mask of Sweater _ 
Patten. Hit the number 4 button to switch to 
polygon f Il tool, changethe color to black, and 
click on thesleeves and the collar. The patten 
should now be removed fromthese parts. 

Duplicatethe Sweater Patten, name 
thenew layer Sweater Patten Sleeve L, 
delete the paint layer of the mask of the new 
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layer, and add a new paint layer. Hit the 4 
button, changethe color to black, and click 
on the UV shallsthat are not the left sleeve 
to mask them out. Go click on the icon of 
the new layer and change the rotation in 
the PROPERTIES panei so that its direction is 
aligned with theleft sleeve. Createtwo more 
duplications of the layer to f xthepatten 
direction of the nght Seeve and the collar 
(Figure 9.27). 
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Step 32: Add smart material to the outf t. Go to 


the SHELF, sect Smart materials in the left 
column, and f nd Fabric UCP. Drag it to LAYERS 
and move it below Sweater. Open the folder 
added called Fabric UCP, f nd Fabric UCP 

layer, go to PROPERTIES, and change Color 01, 
Color 02, Color 03 to three dif erent blue colors 
(Figure 9.28). 
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Step 33: Edge variation. Duplicate Fabric UCP and 
namethe duplicateas Fabric UCP_Edge. Right- 
click on the layer and click add levas. Select the 
newly added Levels- Base Color, drag the middle 
pin of thetop row of theleve graph to theleft 
just a littleto makethe color brighter. 

Create a new black mask to Fabric UCP _ 
Edge, go to the Smart Masksin the SHELF, 
and drag Fabric Edge Damageto the mask 
of Fabric UCP _ Edge. The edge of the garment 
should now become brighter, which mimics 
real-life scratches (Figure 9.29). 

Step 34: Top strap height. Create a new f Il layer 
below Fabric UCP_Edge, nameit Top Strap_ 
Height. Tum of the color, rough, metal, nnm 
channel of the layer, and changeits height 
valueto 0.75. 

Createa black mask for Strap Height 
and givethemask a paint layer. Usethe 
Basic Hard brush and white color to paint on 
the areas that belong to thetop strap layer 
(Figure 9,30). 
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Tips and Tricks 


Don't worry about painting over the sweater, we can 
change the height blend mode of the Sweater folder to 
normal to override it. 


Step 35: Sewing seam. DuplicateTop Strap Height, 
name it Sewing _Seams, set its height to 1, delete, 
and recreate the paint layer in the mask. Hold 
down Shift while clicking to create the sewing 
seams (Figure 9.31). 
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Why? 


Itisdif cult to paint clean lines, so we use the Shift-click 
trick to draw straight lines instead of trying to create a 
f uid arc line. 


Step 36: Waist patch color variation. Duplicate 
Fabrick UCP and name the duplication Fabrick 
UCP Waist. Make the color of the new layer 


AGRE 922 Adidicnaidictothewad patch 


darker and more saturated. Gave the new layer 
a black mask and add a paint layer to the mask. 
Use Brush Hard to paint over the area on and 
below the horizontal seamin the middle painted 
In Step 34 (Figure 9.32). 

Step 37: Waist side patch. Create a new fill layer 
above Fabric UCP_Edge, name it Waist_Side_ 
Patch. Go to the PROPERTIES panel, set the 
Scale value to 25, click on the height uniform 
color button, in the search bar, type in Circles 
to find the Circles mask, and click on it to 
use it as our height. Set the height blending 
mode of Waist_ Side _ Patch to Normal, give 
ita black mask and add a paint layer to the 
mask, and use the Basic Hard brush with white 
color to paint over the side patch of the outfit 
(Figure 9.33). 


Tips and Tricks 


Whenever we need to paint something clean, we can hold 
down the Shift button and do left mouse clicks to draw 
straight lines to mark out the contour of the area and then 
f Il in the middle. 
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Step 38: Pants base color. Switch to the Lower_body_ 


mul, go to SHELF, click on the Materials section, 
search for Fabric Baseball Hat, and drag it to the 
layers. Namethenew layer Pants Base, change 
the Scale of thelayer to 3, and tweak the rotation 
valueso that thedirection of the linesin the 
pattem becomes vertical. Finally, changethecolor 
to a darker grayed out blue color (Figure 9.34). 


Step 39: Pants gradient. Duplicate Pants Base, 


namethe duplication Pants_ Darker, and make 
the color of Pants Darker darker and bluer. 
Give the layer a black mask, add a generator 
to the mask, in the PROPERTIES panel, and 
changethe generator to Mask Editor. In the 
PORPERTIES pane’, set the Curvature Opacity 
to 0 and the Position Gradient Opacity to 1. 
Open the Position Gradient section, turn on 
the Invert, and set the contrast to 0.7. Tweak 
the Balance value so that the transition of the 
brightness of the color starts around the knee 
(Figure 9.35). 


Creracter TettureParting 
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Tips and Tricks 


Gradients are happening all of the places in nature, they 
are great for add detail. 


Step 40: Pants front f ipper. Create a new f Il layer 
above Pants _ Darker, nameit Pants Height_ 
High. Toggleof the color, rough, metal, nnm 
channa of the layer, and changethe Height to 
1to makeit a high ground. Add a black mask 
as well asa paint layer to the mask. 

Draw a long square at thefront of the 
hip to mimic the shape of thef ipper. Create 
a newf Il layer above Pants_Height_High, 
nameit Pants _Height_Low, changeits height 
to —, and giveit a black mask and add a 
paint layer; make the brush smaller and 
draw a vertical lineon thesideof thef ipper 
(Figure 9,36). 

Step 41: Pockets. Add a new paint layer to the mask 
of Pants Height_High and nameit Pocket_ 
Height. Drag it beneath the previous paint layer, 
tum on symmetry, and use the Basic Hard brush 
to paint over the area of the pockets. Make sure 
the brush size is big and covers much more area 
around the pocket. 

Add a Blurf Iter above Pocket_ Haight and 
below the Paint layer; set the Blur Intensity to 7. 

Add another paint layer to the mask, call 
it Pocket_ Opening. Makethe brush smaller, 
press the X button tof ip the color from white 
to black. Paint across the opening of the 
pocket to cut the seam open, and paint of 
all the high areas behind the opening of the 
pocket (Figure 9.37). 
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Tips and Tricks 


Whenever we need to paint something more complicated, 
we can break it down to multiple steps, just like we did in 
Step 40. We create the soft bump with the combination of 
a harsh brush stroke and a blur f Iter. We then paint half of 
it out to mimic the opening of the pocket. 


Step 42: Seams. Go to the paint layer of the mask of 
Pants Height_Low, usea small brush to cut the 
seams on the side of the pants (Figure 9.38). 

Step 43: Back Pocket. Use smilar techniques we 
used for the pockets and f ipper; we can create 
the back pockets with ease. Don't afraid to paint 
over to other parts because we will cover these 
with materials on top (Figure 9.39). 

Step 44: Stitches. Create a new layer on the very 
top and name it Stitches. In the PROPERTIES 
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panel, toggle of metal and nrm, set Base Color 
to white, set the Haght, and the Roughness 
to 1 Giveit a black mask with a paint layer. In 
the Brushes section of the SHELF, f nd and click 
on Stitches 1. Reduce the size of the brush to 
0.9, use the Shift-clicking techniques to draw 
stitches out on the sewing lines of the pants 
(Figure 9.40). 

Step 45: Organization. Select all layers we created so 
far, press Ctl +G to group themin a folder, and 
namethefolder Pants. 
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Belts, Straps, Pockets, 
Holster, and Boots 


Step 46: Leather material. Go to the Smart materials 
section in the SHELF. Find Leather Stylized, 
drag it above the Pants folder, and give Leather 
Stylized a black mask with a paint layer. Press the 
number 4 button to switch to Polygon Fill tool. In 
the PROPERTIES, click on the checker box button 
to switch to UV shell mode. Set the color to white, 
click on the Belts, Straps, Pockets, Holster, and 
Boots to makethe leather show up on these 
parts. Open the Leather Stylized folder, select 
Base Color, change its color to a darker brown 
color (Figure 9.41). 

Step 47: Ref ne curvature. Add a paint layer to the 
mask of the Curvature layer inside Leather 
Stylized. Select the Basic Soft brush in the 
Brushes section of theshelf. Change the color of 
the brush to black and paint out the overgrown 
edge wear on the pockets and gun holster 
(Figure9.42). 

Step 48: Boots bottom. Go to the Smart materials 
under the SHELF. Drag Rubber Dry to thetop 
of thelayer stack and namethe group Boots _ 
Bottom. Give it a black mask with a paint layer. 
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Use polygon f II tool with UV shell selection mode 
to assign the rubber material to the bottom of 
the shoe (Figure 9.43). 


Gloves 


Step 49: Glove Base. Switch to theGlove_and_watch_ 
nti and drag Leather Stylized into the layer stack. 
The result should look like Figure 9.44. 
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Wecan see many bad triangular 
artifacts. These artifacts are dueto us baking 
using thelow-resolution geometry asthe 
high-resolution one. It isall f ne if our texture 
does not rely heavily on the curvature map. 
Pull out the baked curvature map, and you 
can seethe artifacts already existing on the 
baked map (Figure 9.45). 
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Wehavetwo solutions: 

1. Goto TEXTURE SET SETTINGS, under the 
Mesh maps column, click on curvature, 
set the Algorithm to Per Vertex, this will 
give us a much clean curvature map 
(Figure 9.46). 

2. Go back to Maya, select the glove models, 
go to Mesh->Smooth, smooth the glove 
model twice (Figure 9.47). 

We can usethis smoothed moda asthe 

high-resolution model. Grab both the gloves 

and the watch, export then out asan fbxf le. 

Back to Substance Painter; go to TEXTURE 

SET SETTINGS and dick on Bake Mesh Maps. 

In the common settings, check of Use Low 

Poly Mesh as High Poly Mesh. On the side of 

the High-Def nition Mesheslist, click on the 

f leiconto load thef le exported from Maya, 

then bake again (Figure 9.48). 

Solution 2 was used to get a better curvature 
map, and the result is that the leather material 

on theglovelooks like Figure 9.49, 
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Step 50: Ref nethe amount of edgewear. Open 


the Leather Stylized folder and select the Mask 
Editor of the Curvature layer. In the PROPERTIES 
panel, changethe Global Balanceto 0.35 and 
the Global Contrast to 0.83. Go to the mask of 
the Darker Touch layer and select its Levas layer. 
In the PROPERTIES pane, drag the three pins 

on thetop of the LEVELSgraph to thenght to 
minimizethe amount of darker touch. Go to the 
Base color layer and changeit to a darker color 
(Figure 9,50). 


Step 51: Add extra height to the glove. Create a new 


f II layer above Base Color, namethe new layer 
Glove _Extra_Height. In the PROPERTIES pane, 
toggleof color, rough, metal, nrm, and change 
the Height attributeto 1. Add a black mask with 
a paint layer, and usethe Basic Hard brush to 
start painting in some extra layers around the 

f nger and palm. Add a Blurf Iter abovethe 
paint layer to blur out the slope of the height 
(Figure 9.51). 


" 
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Tips and Tricks 


The Shift-click trick was used a lot to create clean straight 
lines. Now, hit the X button and erase to create valleys. We 
use the Hard brush f rst to lay out the patches, and then 
we blur it using a blur f Iter. This workf ow gives us the 

f exibility to tweak how blurred we want it to be. 
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Step 52: Extra scratch to the new patches. Duplicate 
the Curvature layer, name the duplication 
Extra Curvature, and toggle its height on and set 
theheight valueto —0.05. Deaete the Mask Editor 
under its mask and add a new Generator to the 
mask. In the PROPERTIES pana, add a Curvature 
as the Generator; under the PROPERTIES, set the 
global balance to 0.7 and global contrast to 0.45 
to get a basic color variation on the edge and 
high grounds. 

Right-click on the mask of Glove_Extra_ 
Height, select Add Anchor Point (we have 
covered anchor point before). Back to 
the Curvature mask of Extra_ Curvature, 
in the PROPERTIES pand, toggle on Use 
Micro Detail. Under the Image inputs, click 
Micro Height, go to the ANCHOR POINTS 
tab, and select Glove Extra Height mask. 

Go to the Micro Detail section, drag Curvature 
Intensity up to 5, and set the Height Detail 
Intensity to 1.8 (Figure 9.52). 

Step 53: Ref ne the edge wear. Add a paint layer on 
top of the Curvature under the Extra_Curvature. 
Use Dirt1 brush to paint extra edgescratch and 
imperfections (Figure 9.53). 
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Step 54: Add a basic material to the watch. Go to the 


shaf, drag the Plastic Fake Leather material on 
top of the Leather Stylized. Give it a black mask 
with a paint layer, press the number 4 button 
to use Poly Fill tool, and changethe mode of 
the Poly Fill tool to UV shell mode. Set the color 
to white, and click on the watch to assign the 
material to the watch (Figure 9.54). 


Step 55: Add material to the screen of the watch. 


Createa new f Il layer and name it Watch _ 
Monitor. Changethe Base Color of thelayer to a 
dark gray, height to —0.35, roughness to 0.01, and 
the blend mode of the Height channe to normal. 
Give it a black mask and usethe Poly Fill tool to 
make it appear only on the screen of the watch 
(Figure 9.55). 


Step 56: Add extra height to the watch. Create a new 


f Il layer, nameit Watch_Extra_Height, and drag 
the Height down to —L Adda black mask with a 
paint layer and start to paint extra detail on the 
watch. After painting, drag both Watch_ Monitor 
and Watch _Extra_ Height to Plastic Fake Leather 
and rename the folder Watch (Figure 9.56). 
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Step 57: Gun rebake. Switch to the Gun model and 


press Alt +Q to isolatethe gun. The portion inside 
of the holster is darker dueto the baked Ambient 
Occlusion. Open Maya and load the mode in 
there, grabtheHlen_gun_geo, goto File->Export 
Selection, usethe FBX format, and export with 
the name Gun _ High. Back to Substance Painter, 
go to TEXTURE SET SETTINGS, and click Base 
Mesh Maps. Check of Use Low Poly Mesh as High 
Poly Mesh, load Gun_ High in the High-Def nition 
Meshes, and click on Bake Gun _mtl Mesh Maps 
to bakethe mesh maps for thegun again. 


Step 58: Texture the Gun. The Method we useto 


texturethegun isthesamewe used to texture 
our environment modules. Go ahead and f nish 
texturing It; Figure 9.57 shows our result. 


Other Details 


Step 59: Chest Logo. Switch back to Upper _body_ mil 


and create a new f II layer above Fabric UCP. 
Namethe new layer Chest_ Logo, changeits 
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color to a darker gray, height to 1, and giveita 
black mask with a paint layer. Usethe Basic Hard 
brush to paint out the circle of thelogo, shrink 
the brush size, and hit the X button to reversethe 
color. Paint out the middleto createthe outer 
ring of thelogo. 

Changethe Stroke opacity sider above 
the viewport to 50 and hit the X button to 
reverse the color back to white. Makethe 
brush a little smaller and paint over the 
middle of thecirdeto add a half-transparent 
and half-height circular pattem. Change 
the Stroke opacity back to 100 and usethe 
Shift +Left click combinateto draw a letter 
“A”. Finally, hit X again to switch back to 
black; makethe brush small and paint the 
dots across the outer circle (Figure 9.58). 

Sep 60: Metal bolts. Switch to the Lower body mu, 

go to the Matenalsof theshef, f nd and drag 
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Nicka Pureto thetop of thelayer stack, and name 

it Bolts. Cnangethehaght blending mode of this 

new layer to replace. Toggle on theheght channa 

and set the Height valueto 0.5. Changethe color 

to a darker brown and increase roughness to 0.3. 
Give Boltsa black mask with a paint layer, 

and press the number 1 button to switch to 

the paint brush. Use Basic Soft asthe brush, 

hold down Gin and drag right mouse button 

up to makethe brush sharp. You can now 

left-click to add bolts or paint any areas that 

are supposed to be metal. Do the samething 

to thegloves (Figure 9.59). 


Export Textures 


Step 61: Export Textures. Go to File->Export Textures. 


Inthe pop-up Export Document settings 
window, go to CONFIGURATION and choose 
thesameconf guration wedid in Chapter 4. 

Go back to EXPORT, changethe format from png 
to targa, dick on thedirectory, and changeit 

to thesourcamages folder of the Maya project. 
Add a new folder there and name thefolder 
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Hlen_ Textures. Sdect Hlen_ Textures, and press 
Select Folder. Changethe resolution of the Eye 
mti and Hair_mtl to 1024 x1024 to save some 
performance; press Export to export all maps. 

Step 62: Test the textures in Maya. Open our 
Character scenein Maya, select Hlen_head_geo, 
and press Œr +A to open the attnbute editor. 
Select the Body _mtl and click the checker box 
icon after the color to pull out the Create Render 
Node window. Select File in thelist and click on 
the Folder button on the right side of the Image 
Name setting in the Attribute Editor, choose 
Hlend Body mt BaseColortga and press open 
to load it. Press the number 6 button on the 
keyboard to show thetexture. 

Hold down nght mouse button on the 
moda and select Material Attributes to go back 
to the material. In the Attribute Editor, click 
on the checker boxto assign af lenodeto the 
bump mapping. Maya creates a bump2d node 
automatically. Cnangethe UseAs setting to 
Tangent Space Normal in the Attnbbute Editor. 
Cickon the button with a squareand an arrow on 
theleft sdeedgeto go to thef le node. Load the 
Hlen_ Body mth Normal.tga; fora normal map, 
wenead to changethe Color Space setting to Raw. 
Do thesameto all other materials 
(Figure 9.60). 

Step 63: Movethe gun to the ongin. We have placed 
the gun to ensure that the gun works with the 
proportion and color scheme, but for rigging 
and game mechanics, the gun should be placed 
at theongin. Sdect Hlen_gun_geo, and switch 
to the Movetool, hold down D button, and click 
on a Sideface of the barra to movethe pivot to 
that face. Go to Modify->Bake Pivot. Maya then 
generates transformation values based on the 
current location and onentation of the pivot. 
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Go to the Channa Box and zero out all the 
translate and rotate values; the gun should now 
no longer betilted. Do a Modify->Center Pivot, 
hold down D and drag theY and Zaxesto move 
the pivot to the handle; do another Bake Pivot 
and zero out thetranslate and rotate values. 
Finally, rotatethe gun back if it isf ipped and 
do another Modify->Freeze transformation 
(Figure 9.6). 


Why? 


Bake pivot calculates the location and rotation of the pivot 
relative to the origin and overnides the translation values 
with that. We can use it to get the rotation of atilted model 
back, even if we have done a freeze transformation on it. 


Conclusion 


That’s it, we have f nished our character texturing! Overall, 
with Substance Painter, the texturing process should be 
ajoyful one. With smart masks, generators, height map 
painting, and PBR workf ow, we can get many things 
done. Be aware that we have seven texture sets, or 
materials, each with 2k images to achieve this crisp, high- 
resolution result. It isa pretty ambitious setup and would 
not be recommended for low-performance platforms. 
However, we could spoil ourselves on a PC game like what 
we are doing. 


Moving on from here, we will jump into a pretty technical 
process - Rigging. 


Taylor & Francis 
Taylor & Francis Group 


http://taylorandfrancis.com 











Now that we have the 3D model created and UV mapped 
and textured, we can now begin the rigging process. 
Rigging is essentially placing joints inside the character 

so that the animator can then animate those joints and 
bring the character to life. Each joint will inf uence a 
nearby polygon vertice and cause the deformation of that 
polygon. Once there's enough joints inf uencing enough 
vertices, the character will appear to be in motion. This 
will make more sense as we go on. Let’s f rst take a quick 
look at how joints behave in Maya. 
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J oint Behavior 


Create anew Mayaf le and go to the side view. In the 
rigging module, click Skeleton and create joints. Click 
in the side view once, then move your cursor to anew 
area above and click again. Do this one f nal time and 
press Enter. We now have athree-joint chain created 
(Figure 10.1). 


Take a peek in the outliner and notice that the joints are 
created in the hierarchy when clicks. The top joint isthe 
f rst joint you created. Look at the f rst joint and notice 
the orientation is pointed in the direction of the next 
joint. As joints are created, they automatically orient to 
the direction of the next joint. There are ways to add or 
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remove joints to your joint structure, but for now, the main 
thing to know is to press Enter to f nalize your joint chain. 


Few things to note: 


1. The best views to create joints are in the top, side, or 
front views. 

2. Ifyou hold down the shift button while creating joints, 
the joints will be created in a straight line. 

3. Youcan easily change the hierarchy of joints in the 
outliner. For example, select joint 3 and press Shift +P. 
You have now unparented joint 3, and it now stands 
alone, as seen in the viewport. To add it back to the 
hierarchy of joint 1, select joint 3 in the outliner and 
middle mouse drag it under joint 2. As you can see, we 
are now back to our onginal joint hierarchy. 

4. Youcan translate joints in the viewport to get them 
in the position you want, but generally, you do not 
want to rotate the joints. We'll discuss this more as the 
tutorial progresses, but ideally, you want your joint 
rotations to be at 0, 0, 0. This will make the animation 
process go much more smoothly. 


To get comfortable with the joint creation process, create 
a few new joint chains and alter their structure in the 
outliner. Once you're comfortable with creating joints and 
moving them into positions, we should be ready to create 
a skeletal joint structure for our game character. 


J oint Placement— Hip, 
Spine, Neck, and Head 


Let’s start this chapter by creating joints for the root, spinal 
cord, neck, and head. We will use the create joints tool. 


Tutorial 10.1: Create the J oint 
Chain for Our Character 


Step 1: Reference in the moda. Create a new Maya 
f le. Then goto File Create Referenceand point 
toward the 3D character Maya f lewe created in 
the previous chapters. 
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Why? 


Referencing is an industry-standard process. We reference 
in characters, environment, rigs, into scenes so that should 
the characters, environments, or rigs be updated, and 

the f le that we are working on automatically grabs those 
updates. This allows us to make sure that we are working 
on the most up to date models and ngs. 


Step 2: Go to your side view. 


Why? 


By creating our joints in the side view, the joints will be 
created directly in the center of the character. This is 
especially important because we'll be mirroring our left 
arm and left leg joint to the nght side to save some time. 


Step 3: Create a spine joint chain. Go to the menu 
of the viewport and check on Shading > 
X-Ray Joints to seethe joints through the 
modes. Createthe root joint by dicking in 
the middle of the hip area. Oncethat’s done, 
whileholding down the shift button, add 
three more joints going straight up and press 
Enter. You should now havea four-joint chain 
(Figure 10.2). 

Step 4: Renamethe joints. Let’s name our joints 
before wemoveon, starting with joint L Double 
click joint Lin the outline and typein hip. Forthe 
rest of the joints, labe themspine_O1, spine 02, 
and chest. 

Step 5: Make the joints evenly apart. Let’s make it so 
that spine_O1, spine _02, and the chest joint are 
equally apart from each other. Wecan do this 
by using thetranslation attnbute in the nght- 
side channd box. Select spine_O1, ine _02, 
and chest, go to the Channa Box, and typein 
a value of 8in Translate X. The value may vary 
depending on thesize of your character. The 
goal here isto get the chest joint to end up alittle 
below the chest area of your 3D character. This is 
where the chest will rotate from. 

Oncethat’s done, we can now move onto the 
neck and head area. We'll do this by creating a 
new joint chain. 
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Step 6: Create the joint chain of the neck. Hit Create 
joints again and start with the base of the neck. 
Placethe next joint right below thew lineand 
then while holding shift, make the last joint beat 
thetop of the head. See Figure 10.3. 

Step 7: Namethe joints. Let’s namethese joints to 
neck, head, and head_ end. 

Step 8: Parent neck joints to the spine. We have now 
created the joint chain we'll useto animatethe 
neck and head of our character. The next thing 
we need to do with this chain isto add it to our 
existing hip joint hierarchy. To do this, weare 
going to go inthe outliner and middle mouse 
drag it onto the chest joint. Your joint system 
hierarchy should now look likethis (Figure 10.4). 

Before we move on, there's a couple of things 
to note. So far, we've only been translating our 
joints. Double check that all your joints haveno 
values in the rotation channels 
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Why? 


This is the cleanest way of setting up ang for animation. 

By keeping the rotation values at zero, animators can easily 
reset the joints to their original position by entering values 
of zero in the rotation rather than some odd number. 


World J oint 


One joint that we need to add is the ‘parent’ of the root 
joint. It isa world joint that goes at the origin. 


Let’s go ahead and create that. 


Step 9: In the front view, add a new joint at the base 
origin and renameto root_motion. If thereare 
values in thetranslation, go ahead and zero all 
of those out. Parent the hip joint to root_motion 
(Figure 10.5). 
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J oint Placement—Left Arm 


Let’s now move onto creating the left arm joint structure. 
The goal here is to create a left arm structure along with a 
simple f nger joint setup and then mirror that same setup 
to the other side for the right arm. 


Step 10: Create the clavicle joint. Switch to the Create 
J oint tool, and in thefront view, clickin the 
area where the clavicle would be between the 
shoulder and neck area. 

Step 11: Createthe armjoints. While holding down 
the shift button, add the shoulder, elbow, and 
wnist joint, they should forma honzontal joint 
chain at the moment (Figure 10.6). 

Step 12: Renamethe joints. Let’s raabe those: left_ 
clavicle, left_shoulde,, left_elbow, and left_ wrist. 

We now need to rotate the joints to bein 
their correct direction. However, wedo not 
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want to rotate using the regular joint rotation. 
We want to use what’s called joint orient, which 
can befound in the attribute editor once you 
Sdect a joint (Figure 10.7). 


Why? 


Using joint orent allows us to rotate the joints while 
keeping the onginal joint orientation clean. 


Step 13: Position the armjoints to the nght spot. 
First, movetheclavicleif it istoo far in the front 
orin the back. Next, select the left_ shoulder joint, 
and go to the attnbute editor. While holding 
down the Ctrl key, middle mouse drag the values 
in thejoint orient box that corresponds with the 
direction you need to rotate the joint. In our case, 
we need to rotate both the joint orient Zand Y to 
get the direction of the shoulder to properly line 
up with the arm. Oncethe direction of the joint 
is correct, you can changethetranslate X of the 
child joint (left_ elbow) to changethelength of 
the shoulder joint (Figure 10.8). 
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Step 14: Repeat the process we did for the shoulder 
joint to the d bow and wrist joint until the 
arm joints areall positioned to thenght spot 
(Figure 10.9). 
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Tips and Tricks 


Through the instruction experience we have, more than 
half of the students don’t follow this rule. So we are going 
to write this down three times with all capitals: 


DON'T ROTATE THE J OINT, CHANGE J OINT ORIENT! 
DON'T ROTATE THE J OINT, CHANGE J OINT ORIENT! 
DON'T ROTATE THE J OINT, CHANGE J OINT ORIENT! 


Step 15: Parent theleft_davideundemeath the 
chest joint (Figure 10.10). 
Now it’stimeto createthef nger joints. We'll 
just usea basic setup for thef ngers that consists 
of three animate-able joints for each f nger. 


Step 16: Tum on the Snap to Projected Center option. 


Let’stum on ‘Snap to Projected Center’ option, 
which can befound in thetop menu among the 
buttons with icons of magnetics. This allows us 
to createjoints in the ‘perspective’ viewport and 
automatically place the joints insdethe hand 
mesh (Figure 10.11). 
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Step 17: Create the indexf nger joints. Create thef rst 
joint at the base of the knuckle, and add three 
morejoints down thef nger, with thelast one 
being at thetip of thef nger. 

Step 18: Namethef nger joints. Let’s now label 
thesejoints, left_hand_index_Ol, left_hand_ 
index_02, left_hand_index_03, andleft_hand_ 
index_04 (Figure 10.12). 

It’s possiblethat our joint onentations from 
each other area little skewed after creation. Let’s 
go and zero out the values of the joint orient of 
left_hand_index_02, left_hand_index03, and 
left_hand_index_04. 
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Why? 


Upon doing this, we now have a clean structure of 
which the f ngers are all straight. Now we can get the 
orientation correct by changing the joint orientation 
values in the attribute editor the same way we did for 
the arm joints. 


Now that we got that all cleared up and ready to go, let’s 
duplicate and use that same joint setup for the rest of the 
f ngers. 


Step 19: Duplicatethe index f nger for the rest of the 
f ngers. Sdect theleft_hand_index_Ol and press 
Ctrl +D. This makes a duplicate copy of that joint 
system. Movethat new system onto the middle 
f nger and adjust the joint orient accordingly. 
Remember only to translate the joints and use 
the joint onent to rotate the joints into place. 

It’s your choice to either create the thumb from 

scratch or duplicate fromthe indexf nger. 
Repeat the same process for the rest of the 

f ngers and namethen accordingly (Figure 10.13). 
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Step 20: Parent thef ngers to the wrist. The last step 
isto grab all thef rst f nger joints in theoutliner 
and middle mouse drag then undeneath the 
left_wrist joint. This will connect all the f ngers to 
the wnist (Figure 10.14). 


Tips and Tricks 


As you're doing this, be sure to keep your orientations 
cohesive. Make sure that all your f ngers rotate the 
same direction so that as you are animating, you 

can grab all the f ngers and animate them all at once 
in one axis. 





J oint Setup— Right Arm 


To get the right arm created, we could run through the 
whole process again, but we're going to take a shortcut 
for this one. We're going to do a process that’s called 
Mirror J oints. This will essentially duplicate one side of the 
joints to the opposite side and save us much time. 


Step 21: Mirrorthe joints. Select theleft_ clavicle, 
in the Rigging menu, select Skeleton > Mirror 
joints_]. Here, set the Mirror acrossto YZ, so the 
joints are getting mirrored across the Y and Z 
plane. Theother thing we want to do isrdabel 
all of our new joints to start with right, instead 
of left. In the Search for text f dd, type in left. In 
the Replace with text f ad, typein right. If you 
labeled all of your left joints correctly, all of your 
new mirrored joints should be properly labeled 
for thenght side (Figure 10.15). 


Hit the Apply button. And we'vef nished the 
nght arm. 


Mirror 
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J oint Setup— Legs 


The legs will be most likely animated using a method 
called Inverse Kinematics or IK. However, for now, we need 
to create a basic joint structure. Few things to note, we'll 
be creating this in the side view, and we need to be sure 
not to create the joint structure straight down. We need to 
create a slight bend from the thigh, to knee, to the ankle. 


Step 22: Create the leg joints. In the sideview, 
create a new joint at the center of the hip area 
and nameit left_ thigh. Create another joint at 
theknee and then the ankle, and namethem 
accordingly (Figure 10.16). 
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Step 23: Createthe foot joints. Add two more joints 
for the ball of the foot and thetoe, namethen, 
and parent the ball joint to the ankle joint after 
creation (Figure 10.17). 

Once our structure is created, we need to 
go to thefront view of the character, move left_ 
thigh to match the leg joints to the left leg and 
parent it to the hip joint (Figure 10.18). 

Step 24: Mirror the leg joints. The next step would be 
to mirror this leg the same way we mirrored the 
clavicle. 

Step 25: Parent the hip (thigh) joints undeneath the 
hip joint. 

Oncethat’s done, we now havethe left leg 
joint structure complete. Wecan now create 
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what's called an Inverse Kinematic chain forthe 
leg. Inverse Kinematics worksa little dif erently 
than the Forward kinematics that we've been 
using so far. Inverse Kinematics allows us to 
movea point or a target and have the connected 
joints automatically rotatethe joint to point to 
that target. This will make much moresense as 
wecreateone, so let's do that for the left leg. 

Step 26: Go to Skeleton > IKhandleZ and click 
on the Reset Tool button. Wewill only need the 
default setting of this tool. 

Step 27: Apply the |K handleto the leg. Cickthe 
center of the left hip joint and then at theleft 
ankle joint. ThelK handle has now been created. 


To see how this works, grab the ikHandlel in the 
outliner, and trandate it around. Theleg is now 
animating with inverse kinematics instead of 
forward kinematics. Go ahead and namethisIK 
handle, left_leg_ankle IK 

Step 28: Create IK chains for the foot joints. Create 
another IKhandlefromthe ankleto the ball. 
Label thenew IKhandle, left_leg_ball_ IK Create 
af nal IKhandlefromthe ball to thetoe and 
labea it left_leg_toe_IK We should now have 
three IK chains. If you cannot see them, go to the 
menu of the viewport and check on Shading > 
X-Ray (Figure 10.19). 


Step 29: Makethe IK handles sticky. The last step 


for these IK chains isto makethemsticky. To 
achieve this, go to the outliner and select the IK 
handles, then in the attnbbute editor under thelK 
handle Attnibutes section, tum on Sticky under 
Stickiness. Do this for each of the IK handles 
(Figure 10.20). 
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Foot Roll Rig 


The next thing we need to do is create controllers for the 
foot. We'll be animating these later instead of trying to 
grab the IK chains in the outliner. 


Step 30: Create the controller for the left toe. Go 
to Create- NURBS primitives > Circle This 
will createa NURBS cirdeattheorigin. Let’s 
laba this oneleft_toe_ctrl. NURBS modes 
are mathematically constructed, and they are 
lightweight and perfect for creating controllers. 
Step 31: Group the controller. After labeling the 
curve, we need to group it by selecting the NURBS 
curve and then pressing Cin +G. Namethe 
group, left_toe ctrl_group. The group is what 
we'll useto position the curve where weneed it to 
go, leaving the NURBS curve attributes clean. 


Why? 


We'll be animating with the NURBS curves later on, and 
we need those to not have any values on them to make 
the life easier on the animators. By keeping the values 
empty, we can easily reset the controller back to default 
by entering 0 in the values. 
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Step 32: Position the group to the toe joint. Select 
theleft_toe_ctrl_ group and then add sdect the 
left_toejoint. In thetop menu, select Modify > 
Match Transformations Match All Transforms. 
Theleft_toe_ctr_ group should now be moved to 
theleft_toejoint. 

If you don't seethe controller, press Cin +1 to 
isolatethe group, and you can seethat it is just 
too small. To make it bigger, hold down thenght 
mouse button on the curve and select Control 
Vertex. Marquee select, scale, and rotate all the 
vertices shown in Figure 10.21. 


Why? 


We could easily scale the controller up, but that 
introduces scale values in the Channel Box, which will 
cause problems for animation and rigging later on. 
Always remember that the Translate X, Y, Z and Rotate 
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X, Y, Z values of your controller should remain 0, and the 
Scale X, Y, and Z values should remain 1. 


You can press Ctrl +1 again to toggle isolation. 


Step 33: Create the controller for the left ball joint. 
Repeat the same process from Step 29 to Step 31 
fortheleft_ball joint. 

Step 34: Create the hed controller. Create another 
controller and group pair, and namethen 
left_heel ctr andleft_heel_ctr_group. This 
time, instead of match transformation, place 
theleft_heel_ctrl_ group to the base of the heg 
(Figure 10.22). 


Setting Up the Foot Hierarchy 


The next part of the process is putting the controllers into 
the correct hierarchy so they can control the joints. 


Step 35: Parent IK to the controllers. Make Left_leg_ 
ankle_IKa child of left_ball_ ctrl. We can achieve 
this by middle mouse dragging left_leg_ankle_ 
[Konto left_ball_ ctrl. Follow thesametrend, do 
thefollowing parenting operations: 
Makeleft_leg_ball_IKa child of left_toe ctr 
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Makeleft_ball_ ctr. groupachildofleft_toe ctr 
Makeleft_leg toe IKachildofleft_hea_ ctr 
Makeleft_toe ctr groupachildofleft_hea_ ctr 
Your hierarchy should now look like Figure 10.23. 

Step 36: Create a main foot controller. Create 
another controller and group pair. Namethe 
controller left_foot_ctrl and namethe group 
left_foot_ctrl_ group. Placeleft_foot_ctri_group 
directly undemneath the foot. Hold down thenght 
mouse button on the curve and select Control 
Vertex. Marquee selects all the vertices and 
scales them to match ther Szeto the bottom of 
thefoot. Finally, parent left_heal_ctrl_ group to 
left_foot_ctr. 

Step 37: Repeat Steps 25-35 on thenght leg. 

Currently, the joints are not inf uencing any 

of the geometry. The next thing we need to do is 
have it so that the joints are now inf uencing the 
character vertices or polygons. To do this, we'll be 
using a method called Bind skin. 


Tutorial 10.2: Bind and 
Paint Skin Weighting 


Step 1: Select all the joints and the models. In the 
outline, select the root_ motion joint and then 
on thetop menu, go to Select > Hierarchy; this 
will select all the joints. Now, while holding down 
the Gn button, add all the character meshes 
except the gun to the sdection. 

Step 2: Bind the modesto the joints. In the Rigging 
menu, go to skin > bind skin. In the pop-up 
Bind Skin Options window, click on Edit > 
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Reset Settings to use default skinning options 
(Figure 10.24). 

Press the Bind skinbutton. (Binding skin 
will bind the vertices to the closest joints 
so that when you rotate or trandatethe 
joints, the corresponding geometry deforms 
accordingly.) 

Now that our geometry is bound to the 
joints, weneed to ref nethe skin weights. The 
process is known as painting skin weights, which 
isthe process of adjusting the intensity values 
on each vertticeto the corresponding joint. This 
part of thengging process is one of the most 
important as it allows us to make sure each 
joint isdeforming the corresponding geometry 
properly and smoothly. 


Painting Skin Weights 


The goal here is to make sure only the specif ed geometry 
bends with the corresponding bind joint. Another thing 
we're going to do is copy the skin weights from one side 
of the body to the other. So we'll pain the skin weights for 
the character's left side and copy them to the right side. 


To make things easier, we'll paint the skin weights on the 
Ellen_full_ body ref geometry and then transfer the skin 
weights to the main character geometry. 





Step 3: Hide all the geometry except forthe 
Hlen_ full body ref. Sdect the geometry pieces 
in theoutliner and press Ctl +H. Next, be sure 
to unhidetheHlen_ full body _refif it’s hidden. 
Select the geometry in the outliner and press 
Shift +H. 

Step 4: Open the Paint Skin Weight Tool. Select 
the Hlen_full_ body_refin the viewport, hold 
down thenght mouse button, and select the 
Paint Skin Weights tool. This now activates 
the skin weighting process for the geometry 
and joints. 

There area few things to take note of in 
the Tool Settings that pop up. Thef rst isthat 
you'll see a list of all the joints. Select one of 
the joints in thelist, and you'll see which part 
of the geometry that joint is af ecting. The 
controlled geometry area is displayed in white, 
as shown in Figure 10.25. We will be mainly 
using the Add and the Smooth options under 
paint operation. 
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Step 5: Paint the weighting for the head. Let’s start 
with the head joint. Select the head joint in the 
inf uences list on the paint weight tool settings 
box that popped open. Onceselected, make 
surethat the paint operation is set to Add and 
the opacity is at 10000. We'll also put the Value 
at 1.0000. The goal here isto paint the head 
geometry to havea valueof 1 so that when 
thehead joint is animated, the head geometry 
rotates accordingly. 

Paint the whole area of thehead to whiteto 
makethe head joint take full control of the head. 
Moving down to the neck joint and paint the 
neck area to whiteto makethe neck joint control 
the neck (Figure 10.26). 


Tips and Tricks 


When painting, completely white means that vertice has a 
weight value of 1. 


Step 6: Snooth the weighting between the head 
and theneck. Now that we've got the head and 
the neck completely painted with an inf uence 
of 1 (white), what we'll want to do issmooth the 
weighting between thetwo joints. To do this, 
sdiect the head joint in thelist and switch to the 
Smooth operation option in the tool settings. 
Oncethat’s selected, pressthe Flood button 
(located under the opacity option) a few times. 
You'll now seethat the blend is much smoother 
to the neck joint. This will allow fora smooth 
deformation when bending the joint. 
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Tips and Tricks 


You can also hold down Shift and paint to smooth out 
any area. To verify your skin, weights are looking nice and 
clean, grab the head joint, and rotate it. You'll see how the 
geometry is deforming. Once you're done testing it out, 
be sure to set the joint back to 0, 0, O (Figure 10.27). 


Step 7: Paint the waght down the chain. The next 
step would beto work our way down the chain. 
Thechests would bethenext jointsto paint. 
Do the same process as before and use Add 
and paint theinf uence of the chest joint. Once 
donewith that area, you can smooth out the 
transitions (Figure 10.28). 


Tips and Tricks 


Sometimes, as you're going through your paint-weighting 
process, you'll see a vertice with inf uences from an 
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unwanted joint. In these cases, select the vertice and go 

to the Windows > General editors > Component Editor. 
Once there, you'll see a Smooth Skins tab that shows 
which joints are inf uencing that vertice. If there's a joint 
that is inf uencing and you do not want it to, you can enter 
0 in the box associated to that joint (Figure 10.29). 


Step 8: Repeat the weight-painting process for the 
rest of the spine. You will repeat this process 
down thespine. Below isan imageshowing the 
cutof points for each joint (Figure 10.30). 

Once you're done with the spine, It’s time 
to do the arms and legs. Remember, we're 
only doing one side, and then we'll copy the 
weighting to the other side. So, let’s do the 
character's left side. 

Step 9: Paint the weighting for the left clavicle. 
Starting with theleft clavicle, repeating the 
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process of painting in Add mode, and then 
smoothing out (Figure 10.31). 

Step 10: Finish the weighting of the rest of the body. 
Thenext joint would betheshoulder and then 
the dbow, wrist, and f nger joints. Oncethearm 
isdone, the next thing to do would betheleft leg, 
Starting fromthe hips. 


Mirroring the Skin Weights 


Instead of painting the right side of the body, we're going 
to mirror the skin weights from the left side. 


Steo 1: Mirror the skin weights. Select the geometry 
and go to Skin > Mirror Skin Weghts_]. In the 
Mirror Skin Weights Options window, make sure 
that the Mirror across option isset to YZ, and the 
Direction Positive to negative (—Xto X) is checked 
So that it’s mirroring from Postive to Negative 
(+xto —x) (Figure 10.32). 

Hit Mirror. The skin weights have now been 
mirrored to the night side of the body. Besureto 


Lforearm_twist 
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double-check this isin fact the case. Test it by 
animating or rotating the joints. Besureto set 
them back to 0, 0, O afterward. 


Copying the Skin Weights 


Now that we've got the Ellen_full_ body_ref painted, we're 
going to transfer the skin weights from this model to the 
rest of the models. This is a simple process that'll only take 
a few minutes. 


Step 12: Unhidethe modas. Unhidethe geometry 
that we hid before. Select all of the geometry in 
the outliner and press Shift +H. 
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Step 13: Copy skin weight to the sweater. Select 
Hlen_ full. body _refandthen shift sdect 
Hlen_sweater_geo. Goto Kin > Copy Skin 
Weights. The order of selection is important, 
you must select the sourcef rst, and then the 
destination. Once you've hit copy skin weights, 
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theskin weighting should now beapplied to 
theHlen_sweater_geo. Test it out again by 
animating the joints. 
Step 14: Repeat the same process for all of lens geo. 
Once you’ve copied all of the skin weights 
over, test out the deformations. While copying 
the skin weights over does a great job, it’s 
never 100%, so be sureto test out and adjust 
accordingly using the paint skin weights process 
that wedid before. 
Now that the skin weighting is out of the 
way, let’s start creating controllers for the am. 


Tutorial 10.3: Set Up Arm Controls 


Step 1: Duplicatethe left arm joints. Select the 
left_shoulder joint and press Giri +D to duplicate 
it. You should now havea new chain called 
left_snoulderl, left_ dbow, left_wrist. Thef ngers 
were also probably duplicated, but we don't 
need those. In the outline, daetethe duplicated 
f nger joints. 

Step 2: Unparent the new joint chain. Grab 
left_snoulder and press Shift +P. This will 
unparent the new joint chain that we created 
since we want it to function separately fromthe 
deformation joint system. 

Step 3: Rename the new joints. Renamethe 
duplicated joints to left_drv_shoulder, left_drv_ 
elbow, and left_drv_wrist. Asaf nal step on this 
joint chain, place it under a group and name the 
group left_drv_arm_group (Figure 10.33). 

This new joint chain we created is often 
called a driver joint chain. It receives the 
controller's input and dnivethe onginal joints. 
Wealso call the onginal joints the binding joints. 

What we want to do now is create controllers 
to control this driver joint chain. 

Step 4: Create the controller. Go to the top menu 
and select Create Nurbs Primitives > Crde. 


a left_drv_arm_group 


| mm 
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This will createa NURBScirde at the ongin. 
If you do not see it, be sureto go to the 
perspective view. 

Step 5: Delete history. With the circle selected, go to 
Edit - DeetebyType— History. 

Step 6: Renamethecontrollertoleft_fk_ shoulder ct. 

Step 7: Group the controller. With the controller 
selected, press Girl +G. This creates a group 
on top of the controller. Rename that group, 
left_fk_ shoulder ctrl_grp. 

Step 8: Match the group to the shoulder joint. Sdect 
the group and then shift select the left shoulder 
joint. Go to thetop menu, Modify Match 
Transformations Match all Transformations. 
This will placethe group and controller in the 
exact placeand onentation of the selected object. 

Step 9: Tweek the shape of the controller. You'll want 
to resizethe controller if it isnot looking right. 
Manipulatethe control vertices to change its size 
and shape (Figure 10.34). 

Step 10: Duplicate the controller group. Select the 
left_fk_ shoulder ctr_grpand duplicateit by 
pressing Ctrl +D. This creates another group; 
renamethe group to left_fk_edbow_ctr_grp. 
Open the group and renamethe controller under 
it to left_fk_edbow ctr. 
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Tips and Tricks 


It’s important to keep the actual controls clean with 

zero values on them. That’s why we're using the groups 
to move them into position and adjusting the control 
vertices to rotate or scale them into your desired size and 
shape. 





Step 11: Match theleft_fk_ elbow ctrl grptothe 
elbow joint. Grab theleft_fk_edbow _ctrl_grp, 
add select the elbow joint, and do a match 
all transformations. Then, resize the controller 
to your liking by manipulating the control 
vertices. 

Step 12: Repeat Steps 10 and 11 for the wnst. 

Step 13: Put the controller into their correct 
hierarchy. The last step for the controller set 
up isthe hierarchy of the groups and their 
controls. It’s important that after we do 
this, we are moving the groups on top of the 
controls in the outliner. The hierarchy should 
be fromthe shoulder down. So, first, grab 
the elbow group and drag it underneath 
the shoulder controller (not the group, the 
controller under the group). Then, grab the 
wrist group and drag it under the elbow 
controller (Figure 10.35). 

Step 14: Use the controllers to control the driver 
joints. Select left_fk_shoulder_ctr, then shift 
select the left_drv_shoulder joint, and select 
Constrain > Orient. (Besurethat the maintain 
offset option is checked in the settings.) Do the 
same thing for the abow and wrist. In the end, 
you should havethree orient constraints, one 
on each joint. If you did things correctly, you 
should be ableto rotate the controllers and 
see the joints rotate with it. These will be the FK 
arm setup. 
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Constrains 


After you apply constrain to objects, the second one 

in the selection starts to follow the f rst one in the 
selection. Orient constraint makes the object follow the 
rotation only. Go to the constrain menu and you can 

also see Parent and Point. Parent constraint makes the 
object follow both the translation and the rotation. Point 
constraint makes the object follow the translation only. 


IK Arm Setup 


Now let’s set up the IK arm controls. 


Step 15: Create the IK controller for the wrist. 
Duplicatetheleft_fk_wnst_ctr_ grand 
unparent thenew duplicate. Replacethe “fk” in 
the names of the new group and the controller 
under it with “IK.” 

Step 16: Re-shape the new IK controller. Re-shapethe 
new controller by nght clicking and going into 
the Control vertex mode. All you haveto do is 
makeit look dif erent than theleft_fk_wnst_ctr 
(Figure 10.36). 

Step 17: Create the IK controller for the dbow. 
Duplicatetheleft_IK_wrist_ctr_ gm and replace 
the “wrist” in the nameto “elbow.” Sdect the 
new group and match it to the dbow joint with 
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Modify > Match Transformations Match all 
Transformations. Select the group and translate 
it back so it sits behind the bow. Change the 
shape of the controller as shown in Figure 10.37. 

Next, let’s set up the IK control system for 
thearm. 

Step 18: Create the IK Handle. Go to thengging 
module, and then Skeleton > Create lK 
handle. Usethe default settings. Click on the 
left_drv_shoulder, and then left_drv_wrist 
(isolate them so you can easily click on them). 
This will createan IKhandle. Rename it to 
left_wrist_IK. 

Step 19: Parent the IK handleto the IK wnst 
controller. Sect theleft_wrist_IKin the outliner 
and middle mouse drag it onto the left_ 
IK_wrist_ ctrl. Nowleft_IK_wrist_ctrl should be 
driving the IK system. 

Step 20: Set up the IK elbow control. Sect the left _ 
IK_ebow_ctr you created in theoutline. Hold 
down Ctrl and select theleft_wrist_IK, and go 
to Constraint PoleVector. This pole vector 
control should now be ableto control thelK 
elbows position. 

Step 21: Apply wrist rotation control. Thelast 
thing weneed to do isadd an onent constraint 
between theleft_ IK _wnst_ctr andtheleft_ 
drv_wnistjoint. Sect theleft_ IK _wrist_ctrl, 
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and then shift sdect theleft_drv_wnist joint and 
sadect Constrain > orent constraint. 

Now that we havethe IK created, one of 
thelast things we need to do is constrain the 
new duplicate arm driver joints to the onginal 
binding joints. What we'll be doing is parent 
constraining our binding joints to the new 
driver joints. 

Step 22: Parent Constraint the binding joints to the 
driver joints. Select the new left_drv_shoulder 
Joint and shift select theleft_shoulder binding 
joint. Salect Constrain > Parent Constraint to 
apply a parent constraint to the binding joint, go 
ahead, and do thesamething for the dbow and 
the wnist joints. 

Now that we haveour armngsdone, we 
need to clean up the groups in the outliner. 

Step 23: Group all the controllers. Select 
left_fk_ shoulder ctrl group, left_IK_wrist_ 
ctr group, andleft_IK_ elbow ctr group. 
Group them and namethe new group 
left am ctr_group. 

Step 24:Group the controllers and the driver joints. 
Select left_arm_ctrl_ group andleft_drv_arm_ 
group. Group then and namethe new group 
left_arm_nig_group (Figure 10.38). 

You will need to repeat the entire 
Tutonal 10.3 for the nght arm. 


Tutorial 10.4: Finger Controls 


Now that we have the arm completed, we need to create 
controls for each f nger joint. 


Step 1: Create thefk controllers. Geatethefk 
controllers for thef ngers the sameway we 
create the controllers for the arm. You can think 
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of thef ngersas mini arms. Don't forget to parent 
the controllers to their correct hierarchy the same 
way we did forthe arm controllers (do not create 
thelK ones). 

Step 2: Parent constraint the joints. Once you're done 
with all of thef ngers’ controls, you'll need to 
parent constraint the joint to each corresponding 
f nger controller. This isthe same process that 
we've been doing for the other controls. The 
f nger joints should now rotate as you rotate the 
controls. 

Step 3: Group the controllers. Next, let’s group 
all f nger groups under onegroup and call 
it left_hand_group. This group should hold 
all your f nger controls and their group 
(Figure 10.39). 
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Step 4: Make the hand follow the wrist. The last 
step of this process isto parent constrain the 
left_hand_grptotheleft_drv_wnist joint. This 
will make surethat the group follows along with 
thearm motion. 


Tutorial 10.5: Clavicle 
and Body Controls 


Since we have the driver joints and the binding joints for 
the arm, we need to do a similar setup for the clavicles. 


Step 1: Create the driver joint. To start things off, 
we need to duplicate theleft_ clavicle joint. 
This will duplicate the joints underneath. 

We only need the clavicle and shoulder, 

and go ahead and delete everything else. 
Once those are deleted, renamethe joints to 
left_drv_cavicleand left_drv_shoulder. Group 
left_ drv_clavicleand renamethe group to 
left_drv_clavicle group. Finally, unparent the 
group (Figure 10.40). 

Step 2: Creating Clavicle controls. Now we need to 
create controls for the davicles using the same 
method as before. Create a NURBS circle, and 
group it. Movethegroup to the position of the 
clavicle joint by matching all transformations. 
Namethe controller, and the group following the 
Safe convention we've been using. Finally, group 
thetop group of the controller and the driver 
joint to a new group called left_davicle_ng_ 
group (Figure 10.41). 

Step 3: Create an IK handle. Next, weare going 
to create an IKhandleto animatethe 
davicles when thearmisin IKmode. Go to 
Skeleton > CreatelKhandleZ. In the Tool 
Setting window, changethe Current Solver 
setting to Single-Chain Solver. Gick on 
left_drv_clavicle, then left_drv_shoulderto 
create an IKhandleand nameit left_davicle_IK 
(Figure 10.42). 


a/ left_drv_clavicle_group 





AQF 1040 Letdaiderdhaldrjdrtstpadheady 


429 





Gating Gaveswith Urad Engine Sustene Parte, & (Vaya 


a \eft_clavicle_rig_group 
a \eft_clavicle_ctri_group 
~- left_clavicle_ctrl 
a \eft_drv_clavicle_group 
left_drv_clavicle 


left_drv_shoulder 
AGLRE 1041 Gasdenggapsadheady. 


M Tool Settings 


Reset Tool Tool Help 





AGLRE 10 CasdelKardjartsaa 


Step 4: Parent left_clavicle_IKto theleft_clavicle 
controller (Figure 10.43). 

Step 5: Constraint the original joints. Next, we need 
to havethese driver joints drivethe binding 
joints. Select theleft_drv_claviclejoint and 
then shift sect theleft_davidejoint. Do a 
Constrain > Parent Constraint. 

Step 6: Constraint the shoulder driver joints. Next, 
weneed to select theleft_drv_shoulder of the 
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davicle driver joints and then add select the 
left_drv_arm_group and do another parent 
constraint. This will allow the driver jointsfrom 
thearmto follow the clavicle. 

Step 7: Constraint the shoulder FK controllers. 
Select the left_drv_shoulder of thecdlavide 
driver joints and then add select theleft_fk_ 
shoulder_ctri_ group, and do one more parent 
constraint. 

Step 8: Make the clavicle follow the chest. Now, we 
need to makethe daviclegroup follow the chest 
control. Select the chest joint, and then shift 
seect theleft_clavicle_rig_group, and do one 
last Constrain > Parent Constraint. 

Now you havedonetheleft clavicle, do the 
same thing forthenght davide. 

Now it’stimeto createthe root and spine 
controllers. Remember, the controls will all need 
groups. 

Step 9: Create the hip controller (NURBS circle), name 
it, group it, and renamethe group as well. 

Step 10: Grab the group and match all 
transformations to the hip joint. 

Step 1: Parent constrain the hip joint to the hip 
controller. 

Step 12: Repeat this same process for the joints that 
lead all the way up to the head (Figure 10.44). 
Figure 10.44 Body controller setup. 


Gun J oint 


We now need to add one last joint that will be used for the 
weapon in the game. 
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Step 13: Sect Skeleton > Createjoints. Createa 
joint atthe ongin and then translate it insidethe 
gun and renamethe joint to gun_ joint. 

Step 14: Bind the geometry of the gun to gun_ joint. 
Select the gun geometry, add select the gun _ 
joint, and do a Skin > Bind Skin. 

Step 15: Paint the weight of the gun so that the 
gun_joint has complete control of the gun. 


Final Hierarchy 


Now that we have all the controls created, we just need to 
clean them up in the outliner and make sure that they're 
placed in the correct order and under the proper groups. 


Step 16: Greatethe world controller. Create a new 
controller at theongin and renameit to world _ 
ctrl. Group the word controller and renameit to 


Hlen_rig_grp. 
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Step 17: Parent other controllers and driver joints 
under the world controller. The world controller 
should bethe root of the hierarchy. Parent all 
the controllers and driver joints under the world 
controller (Figure 10.45). 
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Conclusion 


We have f nished our rig, but bear in mind that this setup 
isthe bare minimum of rigging. We ripped of everything 
we could to keep rigging simple for you. However, if you 
want to have more advanced rigs, there are plenty of auto 
rigs out there. Plug-ins like Advanced Skeleton, Rapid Rigs, 
can make all the controls for you in a matter of minutes. 
Maya has its own auto ng as well located at Control > 
Create Control Rig. 


There are more things to explore in the world of rigging. 
To name a few, we did not do any facial expression 
controls, and we cannot even move the eyes or open the 
mouth. We also did not set up any stretching. However, we 
Should always avoid overdoing the ng. If we don’t need 
facial expressions, it makes total sense not to rig the face. 


Rigging can be super confusing, so if you don’t understand 
some of the steps, try to read through them again. Also, 

if you don't feel like rigging at all, we have af nished ng 

f lefor you, and you can work the animations with it in the 
next chapter. 


See you there! 


